Initial commit: Laravel-Skelett + Markenwissen-Verfassung + markemacht.de Web

Erfasst den vollständigen Projektstand mit drei Hauptbereichen:

1. Laravel 11 Application-Skelett
   - Standard-Setup (app/, bootstrap/, config/, database/, public/, resources/, routes/, storage/, tests/)
   - Composer + npm Konfiguration
   - Devcontainer für Laravel Sail (PHP/MySQL/Redis)
   - GitHub Actions Workflows (lint + tests)
   - Tailwind/Vite Build-Pipeline

2. docs/ – Wissensbasis "Marke macht." (Methodik-Verfassung)
   Stand nach Pflegerunde 2026-05-28:
   - 00_Methodik-Verfassung: Dok. 000 (v2.0.2) bis Dok. 013 (NEU) + Anhänge
   - 10_Quellen-Original: Wala, Sharp, Simon (read-only Quellen)
   - 20_Markenwissen: 25 abgeleitete MW-Dokumente (Wala_MW-WAL, Sharp_MW-HBG, Simon_MW-SIM)
   - 30_Synthese: Markenwissen_I_Synthese_Gesamt + Scorecard-Regeln
   - 40_Implementierung: 011b-Erweiterung
   - _Steuerung: 00_START_HIER, Serienübersicht, CHANGELOG.md

   Letzte methodische Eingriffe:
   - Methodik-Update v2.0 (Ownership Autorenschaft/Anwendung, Geltungsbereich Kernthese,
     Score-Ebenen DNA-Reifegrad, Preislogik Governance-Scope)
   - Dok. 013 NEU: Akquise- & Conversion-Logik (Auffahrten statt Funnel)
   - Rebranding brandwork.io → Brand Rules (brand-rules.com)
   - Schichtverletzungen behoben, Ordner-Symmetrie hergestellt, Verweise konsolidiert

3. _markemacht.de/ – Web-Frontend Design-Sandbox
   - Statische HTML-Entwürfe (Startseite, Methode, Manifest, Denken, Blog)
   - Design-System (warm_intellectualism, based_web_design)
   - Assets (CSS, JS, Favicon)

Konfiguration:
- .gitignore um .DS_Store und Thumbs.db erweitert
- Lokale Git-Identity gesetzt: Kevin Adametz <kevin.adametz@me.com>
- .env wird ignoriert (nur .env.example versioniert)

Konfliktregel: Bei Spannung zwischen Code und Methodik gilt die Methodik (Dok. 000).
Co-authored-by: Cursor <cursoragent@cursor.com>

.devcontainer/devcontainer.json

@@ -0,0 +1,57 @@
+{
+    "name": "Markemacht (Dev Container)",
+    "dockerComposeFile": [
+        "../docker-compose.yml"
+    ],
+    "service": "laravel.test",
+    "workspaceFolder": "/var/www/html",
+    "remoteUser": "sail",
+    "features": {},
+    "customizations": {
+        "vscode": {
+            "extensions": [
+                "bmewburn.vscode-intelephense-client",
+                "onecentlin.laravel-blade",
+                "shufo.vscode-blade-formatter",
+                "bradlc.vscode-tailwindcss",
+                "Anthropic.claude-code",
+                "adrianwilczynski.alpine-js-intellisense",
+                "onecentlin.laravel-extension-pack",
+                "cierra.livewire-vscode"
+            ]
+        }
+    },
+    // WICHTIG: Nur noch der Haupt-Container bleibt drin
+    "runServices": [
+        "laravel.test"
+    ],
+    "containerEnv": {
+        "WWWUSER": "501",
+        "WWWGROUP": "20",
+        "LARAVEL_SAIL": "1"
+    },
+    "mounts": [
+        "source=${localWorkspaceFolder},target=/var/www/html,type=bind,consistency=cached",
+        "source=/Users/pandora/Library/Mobile Documents/iCloud~md~obsidian/Documents/DEV-Vault/markemacht,target=/var/www/html/docs,type=bind",
+        "source=/Users/pandora/.forgejo_token,target=/tmp/.forgejo_token,type=bind,readonly",
+        "source=/Users/pandora/.ssh,target=/home/sail/.ssh,type=bind,readonly"
+    ],
+    "postCreateCommand": "mkdir -p ~/.local/bin && curl -L https://gitea.com/gitea/tea/releases/download/v0.14.0/tea-0.14.0-linux-arm64 -o ~/.local/bin/tea && chmod +x ~/.local/bin/tea && echo 'export PATH=\"$HOME/.local/bin:$PATH\"' >> ~/.bashrc && (~/.local/bin/tea login add --name 'gitmedia' --url 'https://git.adametz.media' --token $(cat /tmp/.forgejo_token) || true)",
+    "forwardPorts": [
+        5177,
+        5178
+    ],
+    "portsAttributes": {
+        "5177": {
+            "label": "Vite Dev Server (Portal/Backend)",
+            "onAutoForward": "notify"
+        },
+        "5178": {
+            "label": "Vite Dev Server (Web)",
+            "onAutoForward": "notify"
+        }
+    },
+    "runArgs": [
+        "--network=host"
+    ]
+}

.editorconfig

@@ -0,0 +1,18 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2
+
+[compose.yaml]
+indent_size = 4

.env.example

@@ -0,0 +1,65 @@
+APP_NAME=Laravel
+APP_ENV=local
+APP_KEY=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+APP_LOCALE=en
+APP_FALLBACK_LOCALE=en
+APP_FAKER_LOCALE=en_US
+
+APP_MAINTENANCE_DRIVER=file
+# APP_MAINTENANCE_STORE=database
+
+# PHP_CLI_SERVER_WORKERS=4
+
+BCRYPT_ROUNDS=12
+
+LOG_CHANNEL=stack
+LOG_STACK=single
+LOG_DEPRECATIONS_CHANNEL=null
+LOG_LEVEL=debug
+
+DB_CONNECTION=sqlite
+# DB_HOST=127.0.0.1
+# DB_PORT=3306
+# DB_DATABASE=laravel
+# DB_USERNAME=root
+# DB_PASSWORD=
+
+SESSION_DRIVER=database
+SESSION_LIFETIME=120
+SESSION_ENCRYPT=false
+SESSION_PATH=/
+SESSION_DOMAIN=null
+
+BROADCAST_CONNECTION=log
+FILESYSTEM_DISK=local
+QUEUE_CONNECTION=database
+
+CACHE_STORE=database
+# CACHE_PREFIX=
+
+MEMCACHED_HOST=127.0.0.1
+
+REDIS_CLIENT=phpredis
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_MAILER=log
+MAIL_SCHEME=null
+MAIL_HOST=127.0.0.1
+MAIL_PORT=2525
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_FROM_ADDRESS="hello@example.com"
+MAIL_FROM_NAME="${APP_NAME}"
+
+AWS_ACCESS_KEY_ID=
+AWS_SECRET_ACCESS_KEY=
+AWS_DEFAULT_REGION=us-east-1
+AWS_BUCKET=
+AWS_USE_PATH_STYLE_ENDPOINT=false
+
+VITE_APP_NAME="${APP_NAME}"

.gitattributes

@@ -0,0 +1,11 @@
+* text=auto eol=lf
+
+*.blade.php diff=html
+*.css diff=css
+*.html diff=html
+*.md diff=markdown
+*.php diff=php
+
+CHANGELOG.md export-ignore
+README.md export-ignore
+.github/workflows/browser-tests.yml export-ignore

.github/workflows/lint.yml

@@ -0,0 +1,49 @@
+name: linter
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+      - master
+      - workos
+  pull_request:
+    branches:
+      - develop
+      - main
+      - master
+      - workos
+
+permissions:
+  contents: write
+
+jobs:
+  quality:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.4'
+
+      - name: Add Flux Credentials Loaded From ENV
+        run: composer config http-basic.composer.fluxui.dev "${{ secrets.FLUX_USERNAME }}" "${{ secrets.FLUX_LICENSE_KEY }}"
+
+      - name: Install Dependencies
+        run: |
+          composer install -q --no-ansi --no-interaction --no-scripts --no-progress --prefer-dist
+          npm install
+
+      - name: Run Pint
+        run: composer lint
+
+      # - name: Commit Changes
+      #   uses: stefanzweifel/git-auto-commit-action@v7
+      #   with:
+      #     commit_message: fix code style
+      #     commit_options: '--no-verify'
+      #     file_pattern: |
+      #       **/*
+      #       !.github/workflows/*

.github/workflows/tests.yml

@@ -0,0 +1,59 @@
+name: tests
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+      - master
+      - workos
+  pull_request:
+    branches:
+      - develop
+      - main
+      - master
+      - workos
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        php-version: ['8.3', '8.4', '8.5']
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: ${{ matrix.php-version }}
+          tools: composer:v2
+          coverage: xdebug
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: '22'
+
+      - name: Install Node Dependencies
+        run: npm i
+
+      - name: Add Flux Credentials Loaded From ENV
+        run: composer config http-basic.composer.fluxui.dev "${{ secrets.FLUX_USERNAME }}" "${{ secrets.FLUX_LICENSE_KEY }}"
+
+      - name: Install Dependencies
+        run: composer install --no-interaction --prefer-dist --optimize-autoloader
+
+      - name: Copy Environment File
+        run: cp .env.example .env
+
+      - name: Generate Application Key
+        run: php artisan key:generate
+
+      - name: Build Assets
+        run: npm run build
+
+      - name: Run Tests
+        run: ./vendor/bin/pest

.gitignore

@@ -0,0 +1,26 @@
+.DS_Store
+Thumbs.db
+/.phpunit.cache
+/node_modules
+/public/build
+/public/fonts-manifest.dev.json
+/public/hot
+/public/storage
+/storage/*.key
+/storage/pail
+/vendor
+.env
+.env.backup
+.env.production
+.phpactor.json
+.phpunit.result.cache
+Homestead.json
+Homestead.yaml
+npm-debug.log
+yarn-error.log
+/auth.json
+/.fleet
+/.idea
+/.nova
+/.vscode
+/.zed

.npmrc

@@ -0,0 +1 @@
+ignore-scripts=true

_markemacht.de/assets/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" fill="#0A0A0A"/>
+  <rect x="18" y="14" width="28" height="36" fill="#1e1d1d"/>
+  <rect x="18" y="14" width="3" height="36" fill="#E8175D"/>
+  <rect x="18" y="14" width="28" height="2" fill="#ffffff" opacity="0.15"/>
+</svg>

_markemacht.de/assets/js/app.js

@@ -0,0 +1,131 @@
+/* markemacht.de — Interaktionen
+ * - Wirkung-Switch (monolithisch | editorial) + localStorage
+ * - Mobile Drawer
+ * - Scroll-Reveal (IntersectionObserver, max 400ms, ease-out)
+ * - Keyboard: ESC schließt Drawer
+ */
+(function () {
+  'use strict';
+
+  /* ---------- Wirkung ---------------------------------------------------- */
+
+  const STORAGE_KEY = 'mm-wirkung';
+  const VALID = ['monolith', 'editorial'];
+  const DEFAULT = 'monolith';
+
+  function getStored() {
+    try {
+      const v = localStorage.getItem(STORAGE_KEY);
+      return VALID.includes(v) ? v : null;
+    } catch (_) { return null; }
+  }
+
+  function applyMode(mode) {
+    if (!VALID.includes(mode)) mode = DEFAULT;
+    document.documentElement.setAttribute('data-theme', mode);
+    try { localStorage.setItem(STORAGE_KEY, mode); } catch (_) {}
+    syncButtons(mode);
+  }
+
+  function syncButtons(mode) {
+    document.querySelectorAll('[data-wirkung]').forEach((btn) => {
+      const pressed = btn.getAttribute('data-wirkung') === mode;
+      btn.setAttribute('aria-pressed', pressed ? 'true' : 'false');
+    });
+  }
+
+  function initWirkung() {
+    const initial = getStored() || DEFAULT;
+    applyMode(initial);
+
+    document.querySelectorAll('[data-wirkung]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const mode = btn.getAttribute('data-wirkung');
+        applyMode(mode);
+      });
+    });
+  }
+
+  /* ---------- Mobile Drawer --------------------------------------------- */
+
+  function initDrawer() {
+    const drawer = document.querySelector('[data-mobile-drawer]');
+    if (!drawer) return;
+
+    const openBtns = document.querySelectorAll('[data-drawer-open]');
+    const closeBtns = document.querySelectorAll('[data-drawer-close]');
+
+    function open() {
+      drawer.classList.add('is-open');
+      document.body.classList.add('drawer-open');
+      drawer.setAttribute('aria-hidden', 'false');
+      const firstLink = drawer.querySelector('a, button');
+      if (firstLink) firstLink.focus();
+    }
+    function close() {
+      drawer.classList.remove('is-open');
+      document.body.classList.remove('drawer-open');
+      drawer.setAttribute('aria-hidden', 'true');
+    }
+
+    openBtns.forEach((b) => b.addEventListener('click', open));
+    closeBtns.forEach((b) => b.addEventListener('click', close));
+
+    drawer.querySelectorAll('a[href]').forEach((a) => {
+      a.addEventListener('click', close);
+    });
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && drawer.classList.contains('is-open')) {
+        close();
+      }
+    });
+  }
+
+  /* ---------- Scroll Reveal --------------------------------------------- */
+
+  function initReveal() {
+    const items = document.querySelectorAll('[data-reveal]');
+    if (!items.length) return;
+
+    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (prefersReduced || !('IntersectionObserver' in window)) {
+      items.forEach((el) => el.classList.add('is-revealed'));
+      return;
+    }
+
+    const io = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const el = entry.target;
+          const delay = parseInt(el.getAttribute('data-reveal-delay') || '0', 10);
+          if (delay > 0) {
+            setTimeout(() => el.classList.add('is-revealed'), delay);
+          } else {
+            el.classList.add('is-revealed');
+          }
+          io.unobserve(el);
+        }
+      });
+    }, {
+      threshold: 0.08,
+      rootMargin: '0px 0px -5% 0px'
+    });
+
+    items.forEach((el) => io.observe(el));
+  }
+
+  /* ---------- Boot ------------------------------------------------------- */
+
+  function boot() {
+    initWirkung();
+    initDrawer();
+    initReveal();
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    boot();
+  }
+})();

_markemacht.de/denken.html

@@ -0,0 +1,249 @@
+<!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>Denken · MARKE MACHT</title>
+  <meta name="description" content="Ein Denkraum für Klarheit in komplexen Strukturen. Beiträge zu Architektur, Identität und Führung." />
+
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="MARKE MACHT" />
+  <meta property="og:title" content="Denken · MARKE MACHT" />
+  <meta property="og:description" content="Wir sezieren Architektur, Identität und Führung. Kein Rauschen. Nur Substanz." />
+  <meta property="og:url" content="https://markemacht.de/denken.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.html" />
+
+  <script>
+    (function () {
+      try {
+        var v = localStorage.getItem('mm-wirkung');
+        if (v !== 'monolith' && v !== 'editorial') v = 'monolith';
+        document.documentElement.setAttribute('data-theme', v);
+      } catch (_) {}
+    })();
+  </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>
+
+  <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>
+
+  <main id="main">
+    <!-- Hero -->
+    <header class="hero">
+      <div class="hero-keyvisual" aria-hidden="true">
+        <div class="monolith monolith--texture"></div>
+      </div>
+
+      <div class="shell grid-12 hero-grid">
+        <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">
+            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>
+      </div>
+    </section>
+
+    <!-- Beiträge -->
+    <section class="section">
+      <div class="shell grid-12">
+        <div class="col-12 stack-16" data-reveal>
+          <span class="meta">[02] Beiträge</span>
+        </div>
+
+        <div class="col-12">
+          <!-- Monolithisch: Langform-Liste -->
+          <div class="blog-list-mono">
+
+            <article class="post-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);">
+                  Der Mythos der Agilität in starren Märkten.
+                </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.
+                </p>
+              </div>
+            </article>
+
+            <article class="post-row" data-reveal>
+              <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);">
+                  Symptombekämpfung vs. Architektursanierung.
+                </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-row" data-reveal>
+              <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);">
+                  Führung durch Reduktion.
+                </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>
+
+          <!-- Editorial: Featured + Karten-Raster -->
+          <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.
+                </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>
+                <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>
+
+            <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>
+          </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>
+
+  <script src="./assets/js/app.js" defer></script>
+</body>
+</html>

_markemacht.de/dev/based_web_design/das_manifest/code.html

@@ -0,0 +1,231 @@
+<!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>

_markemacht.de/dev/based_web_design/das_manifest_warm/code.html

@@ -0,0 +1,228 @@
+<!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>

_markemacht.de/dev/based_web_design/denken_blog/code.html

@@ -0,0 +1,235 @@
+<!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>

_markemacht.de/dev/based_web_design/denken_warm/code.html

@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+
+<html class="light" lang="de"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Denken - markemacht.de</title>
+<!-- Google 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..700;1,400..700&amp;family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&amp;family=Space+Grotesk:wght@300..700&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 CSS -->
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<!-- Tailwind Config -->
+<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>
+        /* Custom utilities based on style guidance */
+        .ambient-shadow-sm {
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
+        }
+        .ambient-shadow-md {
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
+        }
+    </style>
+</head>
+<body class="bg-background text-on-background font-body-ui antialiased selection:bg-secondary selection:text-on-secondary min-h-screen flex flex-col">
+<!-- TopNavBar -->
+<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="font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight 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">
+<a class="font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight text-[#191919] dark:text-stone-400 opacity-80 hover:text-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">Start</a>
+<a class="font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight text-[#191919] dark:text-stone-400 opacity-80 hover:text-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">Manifest</a>
+<a class="font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight text-[#191919] dark:text-stone-400 opacity-80 hover:text-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">Methode</a>
+<!-- Active Item -->
+<a class="font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight text-[#E8175D] border-b-2 border-[#E8175D] pb-1 hover:text-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">Denken</a>
+</nav>
+<!-- Trailing Action -->
+<a class="hidden md:inline-flex bg-[#191919] text-white px-6 py-2 rounded-lg font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight hover:bg-[#E8175D] transition-colors active:scale-95 transition-transform" href="#">
+                Audit anfragen
+            </a>
+<!-- Mobile Menu Toggle -->
+<button class="md:hidden text-[#191919] dark:text-stone-100">
+<span class="material-symbols-outlined">menu</span>
+</button>
+</div>
+</header>
+<!-- Main Content Canvas -->
+<main class="flex-grow w-full max-w-[1280px] mx-auto px-margin pb-xl">
+<!-- Header Section -->
+<section class="py-xl border-b border-surface-variant mb-lg">
+<h1 class="font-h1 text-h1 text-on-surface mb-gutter">Denken</h1>
+<p class="font-body-editorial text-body-editorial text-on-surface-variant max-w-[720px]">
+                Einblicke, Reflexionen und methodische Ansätze zur Entwicklung starker, wirksamer Marken in einer komplexen Welt. Wir teilen unsere Perspektiven an der Schnittstelle von Strategie, Kultur und Design.
+            </p>
+</section>
+<!-- Filters Section -->
+<section class="mb-lg flex flex-wrap items-center gap-xs">
+<span class="font-accent-label text-accent-label mr-sm text-outline">Kategorien:</span>
+<button class="font-accent-label text-accent-label px-sm py-xs rounded-full bg-primary text-on-primary border border-primary transition-colors">Alle</button>
+<button class="font-accent-label text-accent-label px-sm py-xs rounded-full bg-transparent text-on-surface-variant border border-outline-variant hover:bg-surface-container-high transition-colors">Strategie</button>
+<button class="font-accent-label text-accent-label px-sm py-xs rounded-full bg-transparent text-on-surface-variant border border-outline-variant hover:bg-surface-container-high transition-colors">Kultur</button>
+<button class="font-accent-label text-accent-label px-sm py-xs rounded-full bg-transparent text-on-surface-variant border border-outline-variant hover:bg-surface-container-high transition-colors">Design</button>
+<button class="font-accent-label text-accent-label px-sm py-xs rounded-full bg-transparent text-on-surface-variant border border-outline-variant hover:bg-surface-container-high transition-colors">Technologie</button>
+</section>
+<!-- Bento Grid Layout -->
+<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
+<!-- Featured Article (Spans Full Width, Split Layout) -->
+<article class="col-span-1 md:col-span-12 bg-surface-container-lowest rounded-lg ambient-shadow-sm hover:ambient-shadow-md transition-shadow duration-300 overflow-hidden group cursor-pointer grid grid-cols-1 md:grid-cols-2">
+<div class="relative h-[300px] md:h-auto overflow-hidden">
+<img alt="Featured Article Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" data-alt="top-down view of neat minimal desk with an open notebook, elegant fountain pen, and soft morning shadows on warm textured paper" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxg2BXElZySWQADtnWzWT60grCTHPLxwbhAuKZwMo-3Uc6jHNYcOo2KWXhS6PT_LDLR0KiJqw-efzwvrNksLqCqIpr89WacyHYYL2W58VmfhaKBulPQ1lVRAo3nmR6cTrz31mwtblZ3wi8taqklW4s-k-bDYlmpGuW1Hc0sorAwQ3zQkLvyt-ZhHCrPVMEvSyMBTGHEmnvgsopr7_GcKs5TZGF8u6c1cHgBTMk8Mu0pF59n8OmZmFo1uVeBhbT51H2xmFVXXZMa60"/>
+</div>
+<div class="p-lg flex flex-col justify-center border-l border-surface-variant">
+<div class="flex items-center gap-sm mb-md">
+<span class="font-accent-label text-accent-label px-xs py-base bg-secondary-container text-on-secondary-container rounded">Strategie</span>
+<span class="font-body-ui text-[13px] text-outline">Lesezeit: 8 Min</span>
+</div>
+<h2 class="font-body-editorial text-h2 text-on-surface mb-md group-hover:text-secondary transition-colors duration-300">
+                        Die Architektur der Bedeutung: Warum Markenbildung mehr als nur Oberfläche ist
+                    </h2>
+<p class="font-body-ui text-body-ui text-on-surface-variant mb-lg max-w-[500px]">
+                        In einer Welt des visuellen Überflusses reicht kosmetisches Design nicht aus. Wir untersuchen, wie tiefe strategische Fundamente die Resilienz und Strahlkraft einer Marke definieren.
+                    </p>
+<div class="mt-auto flex items-center text-primary font-accent-label text-accent-label group-hover:gap-xs transition-all">
+                        Weiterlesen <span class="material-symbols-outlined text-[16px] ml-1">arrow_forward</span>
+</div>
+</div>
+</article>
+<!-- Standard Card 1 -->
+<article class="col-span-1 md:col-span-6 lg:col-span-4 bg-surface-container-lowest rounded-lg ambient-shadow-sm hover:ambient-shadow-md transition-shadow duration-300 overflow-hidden flex flex-col group cursor-pointer">
+<div class="relative aspect-[4/3] overflow-hidden border-b border-surface-variant">
+<img alt="Article Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" data-alt="abstract architectural detail of curved concrete forms with warm sunlight casting sharp geometric shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXlk4qOildqTq5tLdsuQVRL4-QsawMEys9DyCMDZpvS3tPEzRUjP3TWoNyQTYierH_SkFcuDverExwa6kjGH8ydNG1nTgM4aUsGSY3RJeb7XGw6ybzQT_T5a0_aA1Cz4pIzOYQlUqGP_SlFQ7iqV3AIHRf4VFKJR0QCxLiqBqCzeBxpmTlu9e5QdblJqw7w8G74UVQO8JnkQr5TJsCgnBbdT-mGr1W2KdYoYZ3by83MTF_3cOrgkP4NEid-PD_CVBVT8dNcJX9lSQ"/>
+</div>
+<div class="p-margin flex flex-col flex-grow">
+<span class="font-accent-label text-accent-label text-on-tertiary-fixed-variant mb-sm block">Design</span>
+<h3 class="font-body-editorial text-h3 text-on-surface mb-sm group-hover:text-secondary transition-colors duration-300">
+                        Ästhetische Kohärenz im digitalen Raum
+                    </h3>
+<p class="font-body-ui text-body-ui text-on-surface-variant line-clamp-3 mb-margin">
+                        Wie Systeme helfen, Wildwuchs zu vermeiden und ein einheitliches Markenerlebnis über unzählige Touchpoints hinweg zu gewährleisten.
+                    </p>
+<div class="mt-auto flex items-center justify-between border-t border-surface-variant pt-sm">
+<span class="font-body-ui text-[13px] text-outline">12. Okt 2023</span>
+</div>
+</div>
+</article>
+<!-- Standard Card 2 -->
+<article class="col-span-1 md:col-span-6 lg:col-span-4 bg-surface-container-lowest rounded-lg ambient-shadow-sm hover:ambient-shadow-md transition-shadow duration-300 overflow-hidden flex flex-col group cursor-pointer">
+<div class="relative aspect-[4/3] overflow-hidden border-b border-surface-variant">
+<img alt="Article Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" data-alt="soft focus image of a team collaborating around a wooden table in a sunlit studio with organic shapes and warm tones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBlaM87gVMd3ycN3cDvclUhIObXF6ERasyeiN_U1ibLUHRUtho3wJEX6QydM-UksmjABiL_JoFAtl9079UKifZbuEtBVGdD3l4dfQUh_DA7SqTc33BGNmv99Oh4Z3gIrZO1RDAwK4zPbvqeKdZqmutl3MQX5lxCVfq8pKAn129o0eHVhvq-Zqp0oYZQxHr0HPtH0HpZMbrVUvp-6zzGvbb3j58TJi_3AHNeqy9Sc_h_BQMSdOhgOqAiMxsuWJhEQ2N5_JEjXElgQZw"/>
+</div>
+<div class="p-margin flex flex-col flex-grow">
+<span class="font-accent-label text-accent-label text-on-tertiary-fixed-variant mb-sm block">Kultur</span>
+<h3 class="font-body-editorial text-h3 text-on-surface mb-sm group-hover:text-secondary transition-colors duration-300">
+                        Die Marke von Innen nach Außen leben
+                    </h3>
+<p class="font-body-ui text-body-ui text-on-surface-variant line-clamp-3 mb-margin">
+                        Employer Branding ist kein Buzzword, sondern die authentische Reflexion der Unternehmenskultur. Ein Plädoyer für Ehrlichkeit.
+                    </p>
+<div class="mt-auto flex items-center justify-between border-t border-surface-variant pt-sm">
+<span class="font-body-ui text-[13px] text-outline">28. Sep 2023</span>
+</div>
+</div>
+</article>
+<!-- Standard Card 3 -->
+<article class="col-span-1 md:col-span-6 lg:col-span-4 bg-surface-container-lowest rounded-lg ambient-shadow-sm hover:ambient-shadow-md transition-shadow duration-300 overflow-hidden flex flex-col group cursor-pointer">
+<div class="relative aspect-[4/3] overflow-hidden border-b border-surface-variant">
+<img alt="Article Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" data-alt="close-up of a person's hands holding a warmly lit tablet showing complex data visualizations in a cozy library setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCSpj5RHZUPZe-8qVQlvNddNN8hjUqTDxVrS1jycDOWGAp3VFjcYUWRHNUj--jEOknD43H842bd_xNNOBpwGdzM2Cxi64R_urugJkOsvmcIkByELXFdZAd1_ZQZrxc-H9L3xGd7_S50FPyvDlmgxBI3a3nutrsSq1EpAG20Ipg_Ludk8xSVXbSxfsLj0QdWb1bUVN3jbcDFeHrJkkQjXQZX-bedmpbmAxatpG73vn84V5dTvTHDMEqm2xdzCjRn2F7LC-s89m7Z0EE"/>
+</div>
+<div class="p-margin flex flex-col flex-grow">
+<span class="font-accent-label text-accent-label text-on-tertiary-fixed-variant mb-sm block">Technologie</span>
+<h3 class="font-body-editorial text-h3 text-on-surface mb-sm group-hover:text-secondary transition-colors duration-300">
+                        KI als Werkzeug, nicht als Autor
+                    </h3>
+<p class="font-body-ui text-body-ui text-on-surface-variant line-clamp-3 mb-margin">
+                        Gedanken zur Integration künstlicher Intelligenz in den kreativen Prozess, ohne die menschliche Intuition zu opfern.
+                    </p>
+<div class="mt-auto flex items-center justify-between border-t border-surface-variant pt-sm">
+<span class="font-body-ui text-[13px] text-outline">05. Sep 2023</span>
+</div>
+</div>
+</article>
+</div>
+<!-- Pagination / Load More -->
+<div class="flex justify-center mt-xl">
+<button class="bg-transparent border border-primary text-primary px-lg py-sm rounded-lg font-body-ui font-medium hover:bg-surface-variant transition-colors">
+                Weitere Beiträge laden
+            </button>
+</div>
+</main>
+<!-- Footer -->
+<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-4">
+<span class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-lg font-black text-[#191919] dark:text-stone-50">
+                    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-col md:flex-row gap-6 md:justify-end items-start md: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>

_markemacht.de/dev/based_web_design/die_methode/code.html

@@ -0,0 +1,323 @@
+<!DOCTYPE html>
+
+<html class="dark" lang="de"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Brand Engineering - MARKE MACHT</title>
+<!-- Google 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=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&amp;family=Outfit:wght@100..900&amp;family=Space+Grotesk:wght@300..700&amp;family=Work+Sans:ital,wght@0,100..900;1,100..900&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 CSS -->
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<!-- Tailwind Config -->
+<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": [
+                              "workSans"
+                      ],
+                      "meta-mono": [
+                              "spaceGrotesk"
+                      ],
+                      "section-headline": [
+                              "Outfit"
+                      ],
+                      "manifest-editorial": [
+                              "newsreader"
+                      ],
+                      "hero-headline": [
+                              "Outfit"
+                      ]
+              },
+              "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>
+        .material-symbols-outlined {
+          font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+    </style>
+</head>
+<body class="bg-[#0A0A0A] text-on-surface font-body-primary text-body-primary selection:bg-signal-primary selection:text-pure-white antialiased">
+<!-- TopNavBar -->
+<nav class="bg-[#0A0A0A] full-width top-0 border-b-0 flat no-shadows sticky z-50">
+<div class="flex justify-between items-center w-full px-12 py-8 max-w-[1440px] mx-auto">
+<div class="text-xl font-black tracking-widest text-white font-outfit uppercase">
+                MARKE MACHT
+            </div>
+<div class="hidden md:flex space-x-12">
+<a class="text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150 uppercase tracking-tighter text-sm font-outfit" href="#">Start</a>
+<a class="text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150 uppercase tracking-tighter text-sm font-outfit" href="#">Manifest</a>
+<a class="text-[#E8175D] font-bold hover:text-[#E8175D] transition-colors duration-150 uppercase tracking-tighter text-sm font-outfit" href="#">Methode</a>
+<a class="text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150 uppercase tracking-tighter text-sm font-outfit" href="#">Denken</a>
+</div>
+<div class="hidden md:block">
+<a class="text-[#E8175D] font-outfit uppercase tracking-tighter text-sm font-bold hover:text-white transition-colors duration-150" href="#">Audit anfragen</a>
+</div>
+</div>
+</nav>
+<main class="w-full max-w-[1440px] mx-auto px-12 overflow-hidden">
+<!-- Hero Section -->
+<section class="py-section-gap-desktop grid grid-cols-12 gap-6 relative">
+<div class="col-span-1 text-neutral-text-dim font-meta-mono text-meta-mono mt-4">
+                [01]
+            </div>
+<div class="col-span-11 md:col-span-8 md:col-start-3">
+<span class="block font-meta-mono text-meta-mono text-neutral-text-dim uppercase mb-12">Die Methode</span>
+<h1 class="font-hero-headline text-hero-headline text-pure-white mb-16 break-words">
+                    Brand Engineering.
+                </h1>
+<div class="font-manifest-editorial text-manifest-editorial text-neutral-text-dim max-w-3xl">
+                    Keine kreative Spielerei, sondern architektonische Konstruktion. Wir ersetzen das Raten durch Systematik und bauen Fundamente, die Lasten tragen.
+                </div>
+</div>
+</section>
+<!-- Intro: Contrast Pairs -->
+<section class="py-section-gap-desktop border-t border-surface-container-high grid grid-cols-12 gap-6 relative">
+<div class="col-span-1 text-neutral-text-dim font-meta-mono text-meta-mono">
+                [02]
+            </div>
+<div class="col-span-11 md:col-span-10 md:col-start-3 grid grid-cols-1 md:grid-cols-2 gap-24">
+<div class="space-y-16">
+<div>
+<h3 class="font-section-headline text-section-headline text-pure-white mb-4">Gebaut.</h3>
+<p class="font-body-primary text-body-primary text-neutral-text-dim">Marken werden nicht in Workshops 'gefunden' oder 'entwickelt'. Sie werden aus harten unternehmerischen Wahrheiten konstruiert. Ein System aus Logik, nicht aus Bauchgefühl.</p>
+</div>
+<div>
+<h3 class="font-section-headline text-section-headline text-pure-white mb-4">Dokumentiert.</h3>
+<p class="font-body-primary text-body-primary text-neutral-text-dim">Was nicht aufgeschrieben ist, existiert nicht. Wir verwandeln implizites Gründerwissen in explizite Regelwerke. Gefühlte Identität wird zu greifbarem Code.</p>
+</div>
+<div>
+<h3 class="font-section-headline text-section-headline text-pure-white mb-4">Nutzbar.</h3>
+<p class="font-body-primary text-body-primary text-neutral-text-dim">Das Ziel ist nicht die hübsche Präsentation in der Schublade, sondern das funktionale Werkzeug für den Alltag. Entscheidungsfilter statt Bilderbuch.</p>
+</div>
+</div>
+<div class="hidden md:block relative h-full">
+<img alt="abstract monolith architectural concrete structure sharp edges harsh shadows brutalist" class="w-full h-full object-cover grayscale opacity-40" data-alt="abstract monolith architectural concrete structure sharp edges harsh shadows brutalist minimal dark" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBusx_Z2-F8OIGFFHMsCy1dcuLscmoB5Ue5SesZZLanfEYZciX2lRM1cs5jnzBaF2sWXrPHeFYINbPCJ0w24MKkLD1e53bUAXUQK-mEkuP581A5Tc8zJ5ZU-D1ohdwPA6ZxqrbHAO1JZCWrhtXYKw2xu4RH9Sc5nm-UBdC005_faaoyebodCOdrPpaUwFKA0DECJXYSVHaAz534vhFJS-GTHDRnMxwCPedbFzI6BH4ANRUDolDGdCy2UgcOfi38XiVMPgjFx3sNjOQ"/>
+</div>
+</div>
+</section>
+<!-- Die Marken-DNA -->
+<section class="py-section-gap-desktop border-t border-surface-container-high grid grid-cols-12 gap-6 relative">
+<div class="col-span-1 text-neutral-text-dim font-meta-mono text-meta-mono mt-2">
+                [03]
+            </div>
+<div class="col-span-11 md:col-span-4">
+<h2 class="font-section-headline text-section-headline text-pure-white mb-12 sticky top-32">
+                    Die Marken-DNA
+                </h2>
+</div>
+<div class="col-span-12 md:col-span-7 space-y-1">
+<!-- Item 1 -->
+<div class="bg-[#141313] p-12 hover:bg-[#1a1a1a] transition-colors duration-300">
+<div class="font-meta-mono text-meta-mono text-signal-primary mb-6">[01]</div>
+<h3 class="font-section-headline text-4xl text-pure-white mb-6">Identitätskern</h3>
+<p class="font-body-primary text-body-primary text-neutral-text-dim max-w-xl">
+                        Die unverhandelbare Essenz. Wer sind Sie, wenn alle Produkte und Services wegfallen? Der Ursprung jeder unternehmerischen Handlung und Haltung.
+                    </p>
+</div>
+<!-- Item 2 -->
+<div class="bg-[#141313] p-12 hover:bg-[#1a1a1a] transition-colors duration-300">
+<div class="font-meta-mono text-meta-mono text-signal-primary mb-6">[02]</div>
+<h3 class="font-section-headline text-4xl text-pure-white mb-6">Positionierungslogik</h3>
+<p class="font-body-primary text-body-primary text-neutral-text-dim max-w-xl">
+                        Die geometrische Verortung im Markt. Kein 'wir sind die Besten', sondern ein klares Koordinatensystem aus Relevanz, Differenzierung und Beweisführung.
+                    </p>
+</div>
+<!-- Item 3 -->
+<div class="bg-[#141313] p-12 hover:bg-[#1a1a1a] transition-colors duration-300">
+<div class="font-meta-mono text-meta-mono text-signal-primary mb-6">[03]</div>
+<h3 class="font-section-headline text-4xl text-pure-white mb-6">Sprachregeln</h3>
+<p class="font-body-primary text-body-primary text-neutral-text-dim max-w-xl">
+                        Das verbale Betriebssystem. Ein präziser Code aus erlaubten Vokabeln, verbotenen Phrasen und tonaler Härte. Text als Architektur, nicht als Dekoration.
+                    </p>
+</div>
+<!-- Item 4 -->
+<div class="bg-[#141313] p-12 hover:bg-[#1a1a1a] transition-colors duration-300">
+<div class="font-meta-mono text-meta-mono text-signal-primary mb-6">[04]</div>
+<h3 class="font-section-headline text-4xl text-pure-white mb-6">Themenrahmen</h3>
+<p class="font-body-primary text-body-primary text-neutral-text-dim max-w-xl">
+                        Die inhaltlichen Grenzen. Worüber sprechen wir? Wichtiger noch: Worüber schweigen wir konsequent? Fokus durch systematische Exklusion.
+                    </p>
+</div>
+<!-- Item 5 -->
+<div class="bg-[#141313] p-12 hover:bg-[#1a1a1a] transition-colors duration-300">
+<div class="font-meta-mono text-meta-mono text-signal-primary mb-6">[05]</div>
+<h3 class="font-section-headline text-4xl text-pure-white mb-6">Grenzregeln</h3>
+<p class="font-body-primary text-body-primary text-neutral-text-dim max-w-xl">
+                        Der rote Bereich. Die exakte Definition dessen, was die Marke zerstört. Leitplanken für schnelle, sichere Entscheidungen im operativen Alltag.
+                    </p>
+</div>
+</div>
+</section>
+<!-- Author Profile -->
+<section class="py-section-gap-desktop border-t border-surface-container-high grid grid-cols-12 gap-6 relative">
+<div class="col-span-1 text-neutral-text-dim font-meta-mono text-meta-mono">
+                [04]
+            </div>
+<div class="col-span-11 md:col-span-5 md:col-start-3">
+<h2 class="font-section-headline text-section-headline text-pure-white mb-8">
+                    Der Architekt.
+                </h2>
+<div class="font-meta-mono text-meta-mono text-signal-primary uppercase mb-6">Kevin Adametz</div>
+<p class="font-body-primary text-body-primary text-neutral-text-dim mb-8">
+                    Strukturiert Chaos. Transformiert diffuse Firmenkulturen in nutzbare Systeme. Berät mittelständische Unternehmer an der Schnittstelle von Identität, Strategie und knallharter Umsetzung. Kein Bullshit, nur Fundamente.
+                </p>
+</div>
+<div class="col-span-12 md:col-span-3 md:col-start-9 relative aspect-[3/4] bg-[#141313]">
+<img alt="close up dark matte textured basalt stone surface sharp angle minimal" class="w-full h-full object-cover opacity-60" data-alt="close up dark matte textured basalt stone surface sharp angle minimal architectural detail" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA47Z_F3S1rhjl3aTUZ6JllXYI4RQwA-CYHxSXP1ci8zZhzdA9WAI9v-1-p3Hbre75-uKc57QhlSCHIetPySPMATYKV_6B2iyibk0_0LidXLxVAzcW2xzZwg3HaMc8B4e3fneSl87VOOE_KmlVREpLVppVaBYdPMgYjPM2oIxCegQ0CmZDuOm0GsAp1-hnsQzqogIiW2jjtcPYZN0zA9eF5pGvi6AD9kJv4PXyZSBHjDvTznU0KJOid50-uzgJ7QVRubt-NYJdfgrI"/>
+</div>
+</section>
+<!-- CTA / Audit -->
+<section class="py-section-gap-desktop border-t border-surface-container-high grid grid-cols-12 gap-6 relative">
+<div class="col-span-1 text-neutral-text-dim font-meta-mono text-meta-mono">
+                [05]
+            </div>
+<div class="col-span-11 md:col-span-8 md:col-start-3 bg-[#363636] p-16 md:p-24 relative overflow-hidden group">
+<div class="relative z-10">
+<h2 class="font-section-headline text-section-headline text-pure-white mb-6">
+                        Systemstatus prüfen.
+                    </h2>
+<p class="font-manifest-editorial text-manifest-editorial text-neutral-text-dim max-w-2xl mb-16">
+                        Das Marken-Klarheits-Audit. Eine schonungslose Diagnose Ihres aktuellen Status Quo. Wir finden die Risse im Fundament, bevor sie strukturell werden.
+                    </p>
+<a class="inline-flex items-center gap-4 text-signal-primary font-meta-mono text-meta-mono uppercase tracking-widest hover:text-white transition-colors duration-300" href="#">
+<span>Audit Details &amp; Anfrage</span>
+<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
+</a>
+</div>
+<!-- Subtle hard lighting effect via gradient instead of shadow -->
+<div class="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>
+</div>
+</section>
+</main>
+<!-- Footer -->
+<footer class="bg-[#0A0A0A] full-width border-t border-stone-800 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 text-stone-600 font-sans text-sm tracking-tight mb-8 md:mb-0">
+                © MARKE MACHT. DENKRAUM FÜR UNTERNEHMER.
+            </div>
+<div class="col-span-12 md:col-span-6 flex flex-wrap gap-8 md:justify-end">
+<a class="text-stone-600 font-sans text-sm tracking-tight hover:text-[#E8175D] transition-colors" href="#">Impressum</a>
+<a class="text-stone-600 font-sans text-sm tracking-tight hover:text-[#E8175D] transition-colors" href="#">Datenschutz</a>
+<a class="text-stone-600 font-sans text-sm tracking-tight hover:text-[#E8175D] transition-colors" href="#">Kontakt</a>
+</div>
+</div>
+</footer>
+</body></html>

_markemacht.de/dev/based_web_design/die_methode_warm/code.html

@@ -0,0 +1,285 @@
+<!DOCTYPE html>
+
+<html class="light" lang="de"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Die Methode - markemacht.de</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=Noto+Serif:ital,wght@0,400..700;1,400..700&amp;family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;family=Space+Grotesk:wght@500&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": {
+                      "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-surface antialiased flex flex-col min-h-screen">
+<!-- TopNavBar -->
+<header class="bg-[#F9F8F0] dark:bg-stone-950 sticky w-full top-0 z-50 border-b border-[#E6E1D3] dark:border-stone-800">
+<div class="flex justify-between items-center w-full px-8 py-4 max-w-[1280px] mx-auto">
+<a class="text-xl font-bold text-[#191919] dark:text-stone-50" href="#">markemacht.de</a>
+<!-- Desktop Nav -->
+<nav class="hidden md:flex gap-8 items-center 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>
+<a class="text-[#191919] dark:text-stone-400 opacity-80 hover:text-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">Manifest</a>
+<a aria-current="page" class="text-[#E8175D] border-b-2 border-[#E8175D] pb-1 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>
+<div class="flex items-center gap-4">
+<a class="hidden lg:inline-flex items-center justify-center bg-primary text-on-primary font-body-ui text-body-ui px-4 py-2 rounded-DEFAULT hover:bg-opacity-90 transition-opacity" href="#">Audit anfragen</a>
+<button class="md:hidden text-[#191919] dark:text-stone-100">
+<span class="material-symbols-outlined text-2xl">menu</span>
+</button>
+</div>
+</div>
+</header>
+<main class="flex-grow">
+<!-- Hero Section -->
+<section class="w-full max-w-[1280px] mx-auto px-margin py-xl md:py-[120px]">
+<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter items-center">
+<div class="lg:col-span-7 flex flex-col gap-sm">
+<span class="font-accent-label text-accent-label text-secondary uppercase bg-[#E6E1D3] w-max px-3 py-1 rounded-sm">Brand Engineering</span>
+<h1 class="font-h1 text-h1 text-primary max-w-[800px]">
+                        Marken-DNA. Systematisch entwickelt.
+                    </h1>
+<p class="font-body-editorial text-body-editorial text-on-surface-variant max-w-[720px] mt-md">
+                        Wir betrachten Marken nicht als flüchtige Werbeversprechen, sondern als konstruierte Systeme. Unsere Methode verbindet analytische Tiefe mit exzellentem Design, um eine Markenarchitektur zu erschaffen, die sowohl strategisch belastbar als auch in der täglichen Praxis sofort anwendbar ist.
+                    </p>
+</div>
+<div class="lg:col-span-5 mt-lg lg:mt-0 relative aspect-square lg:aspect-[4/5] rounded-xl overflow-hidden shadow-sm">
+<img alt="Abstract architectural detail with warm sunlight hitting a textured concrete wall creating soft shadows" class="w-full h-full object-cover" data-alt="Abstract architectural detail with warm sunlight hitting a textured beige concrete wall creating soft diagonal shadows, minimalistic and calm composition" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDS5buFahgFiUCyeIywA3kBhBWXLB-1q7_IvwJiTMbeE425NZUBO90bfMzZeJ71CA6z9b7aiQVP7mV5XBhdMPq-bBRGNm7IVPoo592ZU-nECh5JB3zL0COunuFFTcN_aCYrE82ji2fKeBrwaEtAYHcknjGO_MGCNdHWaRNOpH4wXM5gib1-lEd3bFvkvj7ls3pKzsJwQ36EhUaw0nQHO8s5Hnrk9-iwCX-TwDqi-Jk16IhH_uPXHXlm3sHmDrmfYVWUQ_w8e_UZqQ8"/>
+</div>
+</div>
+</section>
+<!-- The Method Framework (Cards) -->
+<section class="bg-surface-container-low w-full py-xl border-y border-surface-variant">
+<div class="max-w-[1280px] mx-auto px-margin">
+<div class="mb-lg max-w-[720px]">
+<h2 class="font-h2 text-h2 text-primary mb-xs">Die Architektur der Identität</h2>
+<p class="font-body-ui text-body-ui text-on-surface-variant">Ein strukturiertes Vorgehen für den Aufbau, die Dokumentation und die Skalierung Ihrer Marke.</p>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
+<!-- Card 1: Gebaut -->
+<div class="bg-surface rounded-xl p-margin shadow-sm border border-outline-variant flex flex-col gap-md relative overflow-hidden group">
+<div class="absolute top-0 right-0 p-margin opacity-10 font-h1 text-h1">01</div>
+<div class="w-12 h-12 bg-[#F4F1ED] rounded-lg flex items-center justify-center">
+<span class="material-symbols-outlined text-primary text-3xl" data-weight="fill" style="font-variation-settings: 'FILL' 1;">architecture</span>
+</div>
+<div>
+<h3 class="font-h3 text-h3 text-primary mb-sm">Gebaut</h3>
+<p class="font-body-ui text-body-ui text-on-surface-variant">
+                                Das Fundament. Wir analysieren den Status Quo, definieren Positionierung, Werte und Kernbotschaften. Hier entsteht das logische Gerüst der Marke, abgeleitet aus Geschäftsmodell und Marktumfeld.
+                            </p>
+</div>
+</div>
+<!-- Card 2: Dokumentiert -->
+<div class="bg-surface rounded-xl p-margin shadow-sm border border-outline-variant flex flex-col gap-md relative overflow-hidden group">
+<div class="absolute top-0 right-0 p-margin opacity-10 font-h1 text-h1">02</div>
+<div class="w-12 h-12 bg-[#F4F1ED] rounded-lg flex items-center justify-center">
+<span class="material-symbols-outlined text-primary text-3xl" data-weight="fill" style="font-variation-settings: 'FILL' 1;">book_4</span>
+</div>
+<div>
+<h3 class="font-h3 text-h3 text-primary mb-sm">Dokumentiert</h3>
+<p class="font-body-ui text-body-ui text-on-surface-variant">
+                                Das System. Visuelle und verbale Identität werden als modulares System gestaltet. In präzisen Guidelines halten wir Typografie, Farben, Layout-Prinzipien und die Tonalität verbindlich fest.
+                            </p>
+</div>
+</div>
+<!-- Card 3: Nutzbar -->
+<div class="bg-surface rounded-xl p-margin shadow-[0_8px_30px_rgb(0,0,0,0.06)] border border-surface-variant flex flex-col gap-md relative overflow-hidden ring-1 ring-primary/5 transform -translate-y-2">
+<div class="absolute top-0 right-0 p-margin opacity-10 font-h1 text-h1 text-secondary">03</div>
+<div class="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center">
+<span class="material-symbols-outlined text-secondary text-3xl" data-weight="fill" style="font-variation-settings: 'FILL' 1;">tools_wrench</span>
+</div>
+<div>
+<h3 class="font-h3 text-h3 text-primary mb-sm">Nutzbar</h3>
+<p class="font-body-ui text-body-ui text-on-surface-variant">
+                                Die Anwendung. Eine Marke muss im Alltag funktionieren. Wir übergeben strukturierte Assets, UI-Kits und Vorlagen, die es internen Teams ermöglichen, die Marke effizient und konsistent zu skalieren.
+                            </p>
+</div>
+</div>
+</div>
+</div>
+</section>
+<!-- Detail Section (Editorial Style) -->
+<section class="w-full max-w-[1280px] mx-auto px-margin py-xl">
+<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
+<div class="md:col-span-5 flex flex-col justify-center">
+<img alt="Workspace with organized paper documents, sketches, and a wooden pen, bathed in soft, warm natural light" class="rounded-xl object-cover w-full h-[400px]" data-alt="Overhead view of a minimalist desk setup with high-quality textured paper documents, wireframe sketches, and a wooden pencil, bathed in warm afternoon sunlight casting long soft shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAAuVjhg9Nokc-R0VUn0eI-YS-eudYkEj8QL129Uu_ZHzzMqAu9Hpv6yZOb5tfJ5y_DnK3dhR6O4Dip6tylLaJcr8UG1y_e-z3ng1OsugrIGYS80jMDdde1n3B1WqBVg4XDQZx02Z78Lrv0dlrNXT7GNtl_RhwIOmKQHBVzgU4hlxaEHgOwrlQiOIjJnChWlpxZ7JCdgsWFAUEujDjr7T_pVMsJwrHtIubU9X7ZexajaKG3CiK77-WoAwzQnKrAD18JfOwFha-0K8I"/>
+</div>
+<div class="md:col-span-1"></div>
+<div class="md:col-span-6 flex flex-col justify-center gap-md">
+<h2 class="font-h2 text-h2 text-primary">Von der Theorie zur Praxis</h2>
+<p class="font-body-editorial text-body-editorial text-on-surface-variant">
+                         Der Übergang von der strategischen Definition (Gebaut) zur systematischen Dokumentation stellt sicher, dass Designentscheidungen nicht willkürlich, sondern begründet sind. 
+                     </p>
+<p class="font-body-editorial text-body-editorial text-on-surface-variant">
+                         Erst die Überführung in anwendbare Werkzeuge (Nutzbar) erweckt die Marken-DNA zum Leben. Dieser dreistufige Prozess garantiert, dass die intellektuelle Tiefe der Strategie in der täglichen Umsetzung nicht verloren geht, sondern sich als konsistentes Markenerlebnis manifestiert.
+                     </p>
+<div class="mt-sm">
+<a class="inline-flex items-center justify-center bg-transparent text-primary font-body-ui text-body-ui px-4 py-2 rounded-DEFAULT border border-primary hover:bg-surface-container transition-colors" href="#">Manifest lesen</a>
+</div>
+</div>
+</div>
+</section>
+</main>
+<!-- Footer -->
+<footer class="bg-[#F9F8F0] dark:bg-stone-950 border-t border-[#E6E1D3] dark:border-stone-800 w-full 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">
+<div class="flex flex-col gap-4">
+<span class="text-lg font-black text-[#191919] dark:text-stone-50">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>
+<div class="flex gap-6 md:justify-end items-end font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest">
+<a class="text-stone-500 dark:text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80" href="#">Impressum</a>
+<a class="text-stone-500 dark:text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80" href="#">Datenschutz</a>
+<a class="text-stone-500 dark:text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80" href="#">Kontakt</a>
+<a class="text-stone-500 dark:text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80" href="#">LinkedIn</a>
+</div>
+</div>
+</footer>
+</body></html>

_markemacht.de/dev/based_web_design/markemacht.de_design_system/DESIGN.md

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

_markemacht.de/dev/based_web_design/startseite/code.html

@@ -0,0 +1,268 @@
+<!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 | Denkraum für Unternehmer</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:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&amp;family=Outfit:wght@100..900&amp;family=Space+Grotesk:wght@300..700&amp;family=Work+Sans:ital,wght@0,100..900;1,100..900&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": ["workSans"],
+                        "meta-mono": ["spaceGrotesk"],
+                        "section-headline": ["Outfit"],
+                        "manifest-editorial": ["newsreader"],
+                        "hero-headline": ["Outfit"]
+                    },
+                    "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>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+    </style>
+</head>
+<body class="bg-surface-base text-on-surface antialiased overflow-x-hidden selection:bg-signal-primary selection:text-pure-white">
+<!-- TopNavBar Shared Component -->
+<nav class="bg-[#0A0A0A] docked full-width top-0 border-b-0 tonal-shift flat no-shadows sharp-transition relative z-50">
+<div class="flex justify-between items-center w-full px-12 py-8 max-w-[1440px] mx-auto">
+<div class="text-xl font-black tracking-widest text-white font-outfit">MARKE MACHT</div>
+<div class="hidden md:flex space-x-12">
+<a class="font-outfit uppercase tracking-tighter text-[#E8175D] font-bold hover:text-[#E8175D] transition-colors duration-150" href="#">Start</a>
+<a class="font-outfit uppercase tracking-tighter text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150" href="#">Manifest</a>
+<a class="font-outfit uppercase tracking-tighter text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150" href="#">Methode</a>
+<a class="font-outfit uppercase tracking-tighter text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150" href="#">Denken</a>
+</div>
+<a class="font-meta-mono text-meta-mono text-[#E8175D] hover:text-white transition-colors duration-150 flex items-center gap-2" href="#">
+                Audit anfragen
+                <span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
+</a>
+</div>
+</nav>
+<!-- Hero Section -->
+<header class="relative min-h-[921px] flex items-center pt-24 pb-section-gap-mobile md:pb-section-gap-desktop">
+<!-- Keyvisual Monolith Fragment -->
+<div class="absolute inset-y-0 right-0 w-1/3 md:w-1/2 overflow-hidden pointer-events-none opacity-40 md:opacity-100 z-0">
+<div class="w-full h-full bg-cover bg-left" data-alt="Massive fragment of dark basalt or concrete, sharply angled, illuminated with a harsh magenta light edge against total darkness, abstract architectural brutalism" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBaoUBMQDrKN6Kn6aWhJWg43rD0RL0YNbWq0FxlhIvkHJOmcOea7pTuX9ha8YLPfjztpqHyUZVtn1iRK4rwgp4oQ8LGtt0HGIb3_iXNZnu7eipGFQ_hWRLHIJbH-t4r05Oo0flst7UzC76Efe4dQgqk60-Kn1wn-geRI4rHh8k3b7GmIRN8doFzlGJnwmuRSEcBV_j14knDi8OFHGdXnCrEtqrt7IwngxjD_pyQpW8TpNzZEvbp5HV365FxwKPZQgBn8awaTGnLf78'); box-shadow: inset 40px 0 100px -20px #0A0A0A;">
+<!-- Overlay to blend with background -->
+<div class="absolute inset-0 bg-gradient-to-r from-surface-base via-surface-base/80 to-transparent"></div>
+</div>
+</div>
+<div class="max-w-[1440px] mx-auto px-12 w-full relative z-10 grid grid-cols-12 gap-8">
+<div class="col-span-12 md:col-span-10 lg:col-span-8 flex flex-col items-start gap-8">
+<h1 class="font-hero-headline text-hero-headline text-pure-white max-w-[900px]">
+                    Wenn Sie Ihr Unternehmen nicht erklären können, haben Sie kein Marketingproblem.
+                </h1>
+<p class="font-manifest-editorial text-manifest-editorial text-neutral-text-dim">
+                    Sie haben ein Markenproblem.
+                </p>
+<div class="mt-12">
+<a class="inline-flex items-center gap-4 bg-surface-elevated px-8 py-6 hover:bg-surface-bright transition-colors group" href="#symptome">
+<span class="font-meta-mono text-meta-mono text-pure-white group-hover:text-signal-primary transition-colors">Warum das so ist</span>
+<span class="material-symbols-outlined text-neutral-text-dim group-hover:text-signal-primary transition-colors" data-icon="south">south</span>
+</a>
+</div>
+</div>
+</div>
+</header>
+<!-- Section 01: Die Symptome -->
+<section class="py-section-gap-mobile md:py-section-gap-desktop relative bg-surface" id="symptome">
+<div class="max-w-[1440px] mx-auto px-12 grid grid-cols-12 gap-8">
+<!-- Section Number -->
+<div class="col-span-12 md:col-span-2 mb-8 md:mb-0">
+<span class="font-meta-mono text-meta-mono text-neutral-text-dim">[01]</span>
+</div>
+<!-- Content Area -->
+<div class="col-span-12 md:col-span-10 lg:col-span-8">
+<h2 class="font-section-headline text-section-headline text-pure-white mb-24 max-w-[800px]">
+                    Drei Anzeichen, dass Ihr Unternehmen sprachlich handlungsunfähig ist.
+                </h2>
+<!-- Asymmetrical List -->
+<div class="space-y-24">
+<!-- Point 1 -->
+<div class="grid grid-cols-12 gap-8 items-start">
+<div class="col-span-12 md:col-span-4 lg:col-span-3">
+<span class="font-meta-mono text-meta-mono text-signal-primary block mb-4">Symptom Eins</span>
+</div>
+<div class="col-span-12 md:col-span-8 lg:col-span-9 bg-surface-elevated p-12 hover:bg-surface-bright transition-colors">
+<h3 class="font-manifest-editorial text-manifest-editorial text-pure-white mb-6">Jeder erklärt anders.</h3>
+<p class="font-body-primary text-body-primary text-neutral-text-dim max-w-[500px]">
+                                Wenn drei Geschäftsführer drei unterschiedliche Antworten auf die Frage nach dem Kernangebot geben, fehlt das strategische Fundament. Die Folge: Verzettelung im Vertrieb.
+                            </p>
+</div>
+</div>
+<!-- Point 2 (Offset) -->
+<div class="grid grid-cols-12 gap-8 items-start">
+<div class="hidden md:block col-span-2 lg:col-span-3"></div>
+<div class="col-span-12 md:col-span-4 lg:col-span-3">
+<span class="font-meta-mono text-meta-mono text-signal-primary block mb-4">Symptom Zwei</span>
+</div>
+<div class="col-span-12 md:col-span-6 lg:col-span-6 bg-surface-elevated p-12 hover:bg-surface-bright transition-colors">
+<h3 class="font-manifest-editorial text-manifest-editorial text-pure-white mb-6">Kommunikation hängt an Personen.</h3>
+<p class="font-body-primary text-body-primary text-neutral-text-dim">
+                                Das Wissen über den Wert des Unternehmens existiert nur in den Köpfen weniger Experten. Es gibt kein dokumentiertes Regelwerk für neue Mitarbeiter oder Agenturen.
+                            </p>
+</div>
+</div>
+<!-- Point 3 -->
+<div class="grid grid-cols-12 gap-8 items-start">
+<div class="col-span-12 md:col-span-4 lg:col-span-3">
+<span class="font-meta-mono text-meta-mono text-signal-primary block mb-4">Symptom Drei</span>
+</div>
+<div class="col-span-12 md:col-span-8 lg:col-span-7 bg-surface-elevated p-12 hover:bg-surface-bright transition-colors border-l-4 border-signal-primary">
+<h3 class="font-manifest-editorial text-manifest-editorial text-pure-white mb-6">Mehr Content, weniger Wirkung.</h3>
+<p class="font-body-primary text-body-primary text-neutral-text-dim">
+                                Marketing produziert blindlings Material, das keine Haltung vermittelt. Die Lautstärke wird erhöht, weil die Substanz fehlt.
+                            </p>
+</div>
+</div>
+</div>
+</div>
+</div>
+</section>
+<!-- Quote Section -->
+<section class="py-section-gap-mobile md:py-section-gap-desktop bg-surface-base relative flex items-center justify-center min-h-[614px]">
+<div class="max-w-[1440px] mx-auto px-12 w-full text-center">
+<blockquote class="max-w-[1000px] mx-auto">
+<p class="font-manifest-editorial text-[48px] md:text-[72px] leading-[1.1] text-pure-white font-light tracking-tight">
+                    "Marke ist kein Gefühl.<br/>
+<span class="text-neutral-text-dim">Marke ist ein Regelwerk.</span>"
+                </p>
+</blockquote>
+</div>
+</section>
+<!-- Section 02: Das Problem -->
+<section class="py-section-gap-mobile md:py-section-gap-desktop bg-surface">
+<div class="max-w-[1440px] mx-auto px-12 grid grid-cols-12 gap-8">
+<div class="col-span-12 md:col-span-2 mb-8 md:mb-0">
+<span class="font-meta-mono text-meta-mono text-neutral-text-dim">[02]</span>
+</div>
+<div class="col-span-12 md:col-span-8 lg:col-span-6">
+<h2 class="font-section-headline text-section-headline text-pure-white mb-12">
+                    Textklarheit erzwingt Denkklarheit.
+                </h2>
+<div class="space-y-8 font-body-primary text-body-primary text-neutral-text-dim">
+<p>
+                        Die meisten Markenprojekte scheitern, weil sie mit Farben und Logos beginnen. Sie verwechseln Dekoration mit Identität. Wir drehen den Prozess um.
+                    </p>
+<p>
+                        Bevor etwas gestaltet wird, muss es präzise formuliert sein. Ein Monolith aus Sprache, der nicht wackelt, wenn der Wind der Trends weht.
+                    </p>
+</div>
+<div class="mt-16">
+<a class="inline-flex items-center gap-4 border-b border-surface-elevated pb-4 hover:border-signal-primary transition-colors group" href="#">
+<span class="font-meta-mono text-meta-mono text-pure-white group-hover:text-signal-primary transition-colors">Das Manifest lesen</span>
+<span class="material-symbols-outlined text-neutral-text-dim group-hover:text-signal-primary transition-colors" data-icon="east">east</span>
+</a>
+</div>
+</div>
+</div>
+</section>
+<!-- Global CTA -->
+<section class="py-section-gap-mobile md:py-section-gap-desktop bg-surface-base border-t border-surface-elevated">
+<div class="max-w-[1440px] mx-auto px-12 flex flex-col items-center text-center">
+<h2 class="font-hero-headline text-[64px] md:text-hero-headline text-pure-white mb-12">
+                Bereit für Klarheit?
+            </h2>
+<a class="bg-pure-white text-surface-base font-meta-mono text-meta-mono px-12 py-6 hover:bg-signal-primary hover:text-pure-white transition-colors duration-300" href="#">
+                Audit anfragen
+            </a>
+</div>
+</section>
+<!-- Footer Shared Component -->
+<footer class="bg-[#0A0A0A] full-width border-t border-stone-800 flat 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="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 flex-col md:flex-row md:justify-end gap-6 md:gap-12">
+<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>
+</footer>
+</body></html>

_markemacht.de/dev/based_web_design/startseite_warm/code.html

@@ -0,0 +1,302 @@
+<!DOCTYPE html>
+
+<html lang="de"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Startseite (Warm) - markemacht.de</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=Noto+Serif:wght@400;700&amp;family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;family=Space+Grotesk:wght@500&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": {
+                    "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;
+        }
+        .text-magenta {
+            color: #E8175D;
+        }
+        .bg-magenta {
+            background-color: #E8175D;
+        }
+        .border-magenta {
+            border-color: #E8175D;
+        }
+        .ambient-shadow {
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
+        }
+        .ambient-shadow-hover:hover {
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
+            transform: translateY(-2px);
+            transition: all 0.3s ease;
+        }
+    </style>
+</head>
+<body class="bg-background text-on-background font-body-ui antialiased">
+<!-- TopNavBar -->
+<header class="sticky top-0 z-50 w-full bg-[#F9F8F0] border-b border-[#E6E1D3]">
+<div class="flex justify-between items-center w-full px-8 py-4 max-w-[1280px] mx-auto">
+<a class="text-xl font-bold text-[#191919]" href="#">markemacht.de</a>
+<nav class="hidden md:flex gap-8 items-center font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight">
+<a class="text-[#E8175D] border-b-2 border-[#E8175D] pb-1" href="#">Start</a>
+<a class="text-[#191919] opacity-80 hover:text-[#E8175D] transition-colors duration-200" href="#">Manifest</a>
+<a class="text-[#191919] opacity-80 hover:text-[#E8175D] transition-colors duration-200" href="#">Methode</a>
+<a class="text-[#191919] opacity-80 hover:text-[#E8175D] transition-colors duration-200" href="#">Denken</a>
+</nav>
+<a class="hidden md:inline-flex items-center justify-center px-4 py-2 bg-[#191919] text-white rounded-[8px] font-medium text-sm hover:bg-[#E8175D] transition-colors duration-200 active:scale-95" href="#">
+                Audit anfragen
+            </a>
+<button class="md:hidden text-[#191919]">
+<span class="material-symbols-outlined">menu</span>
+</button>
+</div>
+</header>
+<main>
+<!-- Hero Section -->
+<section class="w-full max-w-[1280px] mx-auto px-8 py-xl min-h-[819px] flex flex-col justify-center relative overflow-hidden">
+<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter relative z-10">
+<div class="lg:col-span-8 flex flex-col items-start space-y-md">
+<span class="font-accent-label text-accent-label text-magenta bg-magenta/10 px-3 py-1 rounded-full uppercase tracking-widest">Markenstrategie &amp; Design</span>
+<h1 class="font-h1 text-h1 text-primary max-w-4xl leading-tight">
+                        Wachstum durch radikale <span class="text-magenta">Klarheit.</span>
+</h1>
+<p class="font-body-editorial text-body-editorial text-on-surface-variant max-w-2xl mt-sm">
+                        Wir transformieren komplexe B2B-Unternehmen in unwiderstehliche Marken. Mit einem fundierten, methodischen Ansatz lösen wir nicht nur Gestaltungsprobleme, sondern strategische Wachstumsbarrieren.
+                    </p>
+<div class="flex flex-wrap gap-4 mt-lg">
+<a class="inline-flex items-center justify-center px-6 py-3 bg-primary text-on-primary rounded-[8px] font-medium text-base hover:bg-magenta transition-colors duration-300" href="#">
+                            Methode entdecken
+                        </a>
+<a class="inline-flex items-center justify-center px-6 py-3 bg-transparent border border-primary text-primary rounded-[8px] font-medium text-base hover:bg-surface-dim transition-colors duration-300" href="#">
+                            Manifest lesen
+                        </a>
+</div>
+</div>
+</div>
+<!-- Soft Monolith Motif Background -->
+<div class="absolute right-0 top-1/2 -translate-y-1/2 w-[600px] h-[800px] z-0 opacity-20 pointer-events-none hidden lg:block">
+<img alt="Abstract soft textured geometric shape resembling a monolith in light warm tones" class="w-full h-full object-cover rounded-tl-[100px] rounded-bl-[20px]" data-alt="Abstract soft textured geometric shape resembling a monolith in light warm tones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBjn2BlKGjL4PWHmR2kVypP6_eL1uWJJ7rf36Nq16ggdS9IH0trn5j07Dej4mHzbbpcfbDOV2-7-5DK_41Qjjoi9ejP4qvH-QAvuG_69zo5qA2F4IgZLiyv9oWae9BHUnseqPzu_uhtt0cE_Qwuc1i3Y3ZbnH94LmPwtSC5R4hdMjLZIAmOspmTyHuHE13lGRvDKe2E1AZMpU5V43XJJCRVTSfckGxYyydwcCzUPGoFkGYSp2P5MMLFVRXCX1Q7LkWgU_EIZLT8Ums"/>
+</div>
+</section>
+<!-- Symptome Section (Bento Grid) -->
+<section class="w-full bg-surface-container-low py-xl">
+<div class="max-w-[1280px] mx-auto px-8">
+<div class="mb-lg flex flex-col md:flex-row md:items-end justify-between gap-6">
+<div>
+<span class="font-accent-label text-accent-label text-on-surface-variant uppercase tracking-widest mb-2 block">Die Realität</span>
+<h2 class="font-h2 text-h2 text-primary">Symptome unklarer Positionierung</h2>
+</div>
+<p class="font-body-editorial text-body-editorial text-on-surface-variant max-w-md">
+                        Wenn die Strategie fehlt, zeigt sich das im operativen Alltag. Erkennen Sie Ihr Unternehmen hier wieder?
+                    </p>
+</div>
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-gutter">
+<!-- Card 1 -->
+<div class="bg-surface-container-lowest rounded-[16px] p-[32px] ambient-shadow ambient-shadow-hover border border-[#E6E1D3] flex flex-col h-full">
+<div class="w-12 h-12 rounded-full bg-magenta/10 flex items-center justify-center text-magenta mb-6">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">trending_down</span>
+</div>
+<h3 class="font-h3 text-h3 text-primary mb-3">Preiskampf statt Wertschöpfung</h3>
+<p class="font-body-ui text-body-ui text-on-surface-variant flex-grow">
+                            Ihre Angebote werden primär über den Preis verglichen, weil der einzigartige Wert für den Kunden nicht sofort greifbar ist.
+                        </p>
+</div>
+<!-- Card 2 -->
+<div class="bg-surface-container-lowest rounded-[16px] p-[32px] ambient-shadow ambient-shadow-hover border border-[#E6E1D3] flex flex-col h-full">
+<div class="w-12 h-12 rounded-full bg-magenta/10 flex items-center justify-center text-magenta mb-6">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">diversity_3</span>
+</div>
+<h3 class="font-h3 text-h3 text-primary mb-3">Fachkräftemangel</h3>
+<p class="font-body-ui text-body-ui text-on-surface-variant flex-grow">
+                            Es fällt schwer, Top-Talente zu gewinnen und zu binden, da eine klare und attraktive Arbeitgebermarke (Employer Brand) fehlt.
+                        </p>
+</div>
+<!-- Card 3 -->
+<div class="bg-surface-container-lowest rounded-[16px] p-[32px] ambient-shadow ambient-shadow-hover border border-[#E6E1D3] flex flex-col h-full">
+<div class="w-12 h-12 rounded-full bg-magenta/10 flex items-center justify-center text-magenta mb-6">
+<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">campaign</span>
+</div>
+<h3 class="font-h3 text-h3 text-primary mb-3">Ineffizientes Marketing</h3>
+<p class="font-body-ui text-body-ui text-on-surface-variant flex-grow">
+                            Marketingbudgets verpuffen, da die Botschaften inkonsistent sind und die Zielgruppe nicht emotional oder rational abholen.
+                        </p>
+</div>
+</div>
+</div>
+</section>
+<!-- CTA Section -->
+<section class="w-full max-w-[1280px] mx-auto px-8 py-xl">
+<div class="bg-primary rounded-[24px] p-8 md:p-16 relative overflow-hidden flex flex-col md:flex-row items-center justify-between gap-12">
+<div class="absolute inset-0 z-0 opacity-10 mix-blend-overlay">
+<img alt="Dark textured abstract background with subtle organic grain" class="w-full h-full object-cover" data-alt="Dark textured abstract background with subtle organic grain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7PcaHMLfRo-_lbUSZYL2vnUpQ_-pxEKqckLQlmg-lYO5vxnifdAeLZV8VMMQVJG9WpOKjy7NcBTXVzKQJMLK3jAVdtGglMif8f2xf709ys_Rv15okFwhUeRMEZGblG4fFYCgaoPpdum-cKCjmDyEn7q-GQVRVuKD1ca_BCXl01OJD2eCk4_gS31ArZqRnogt_5Vh5iRTmCGX5H495shDumo2K7-WGk_qkYQo6V0PqtBoUyhgbr7GlUaP-o4Og-FmygreLEml_LGA"/>
+</div>
+<div class="relative z-10 max-w-2xl text-on-primary">
+<h2 class="font-h2 text-h2 mb-4">Bereit für den Wandel?</h2>
+<p class="font-body-editorial text-body-editorial opacity-80 mb-8">
+                        Lassen Sie uns in einem unverbindlichen Gespräch herausfinden, wie wir Ihre Marke stärken können.
+                    </p>
+<a class="inline-flex items-center justify-center px-6 py-3 bg-magenta text-white rounded-[8px] font-medium text-base hover:bg-white hover:text-primary transition-colors duration-300" href="#">
+                        Audit anfragen
+                    </a>
+</div>
+</div>
+</section>
+</main>
+<!-- Footer -->
+<footer class="w-full bg-[#F9F8F0] border-t border-[#E6E1D3]">
+<div class="grid grid-cols-1 md:grid-cols-2 gap-8 w-full px-8 py-12 max-w-[1280px] mx-auto">
+<div class="flex flex-col gap-4">
+<span class="text-lg font-black text-[#191919]">markemacht.de</span>
+<p class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500">© 2024 markemacht.de. Alle Rechte vorbehalten.</p>
+</div>
+<div class="flex flex-wrap md:justify-end gap-6 items-center">
+<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80" href="#">Impressum</a>
+<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80" href="#">Datenschutz</a>
+<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80" href="#">Kontakt</a>
+<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80" href="#">LinkedIn</a>
+</div>
+</div>
+</footer>
+</body></html>

_markemacht.de/dev/based_web_design/warm_intellectualism/DESIGN.md

@@ -0,0 +1,175 @@
+---
+name: Warm Intellectualism
+colors:
+  surface: '#fbfaf2'
+  surface-dim: '#dbdad3'
+  surface-bright: '#fbfaf2'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#f5f4ec'
+  surface-container: '#efeee6'
+  surface-container-high: '#e9e8e1'
+  surface-container-highest: '#e3e3db'
+  on-surface: '#1b1c17'
+  on-surface-variant: '#444748'
+  inverse-surface: '#30312c'
+  inverse-on-surface: '#f2f1e9'
+  outline: '#747878'
+  outline-variant: '#c4c7c7'
+  surface-tint: '#5f5e5e'
+  primary: '#000000'
+  on-primary: '#ffffff'
+  primary-container: '#1c1b1b'
+  on-primary-container: '#858383'
+  inverse-primary: '#c8c6c5'
+  secondary: '#b80046'
+  on-secondary: '#ffffff'
+  secondary-container: '#e4115a'
+  on-secondary-container: '#fffbff'
+  tertiary: '#000000'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#390b00'
+  on-tertiary-container: '#c8694b'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#e5e2e1'
+  primary-fixed-dim: '#c8c6c5'
+  on-primary-fixed: '#1c1b1b'
+  on-primary-fixed-variant: '#474746'
+  secondary-fixed: '#ffd9dd'
+  secondary-fixed-dim: '#ffb2bc'
+  on-secondary-fixed: '#400013'
+  on-secondary-fixed-variant: '#910035'
+  tertiary-fixed: '#ffdbd0'
+  tertiary-fixed-dim: '#ffb59e'
+  on-tertiary-fixed: '#390b00'
+  on-tertiary-fixed-variant: '#7a2f15'
+  background: '#fbfaf2'
+  on-background: '#1b1c17'
+  surface-variant: '#e3e3db'
+typography:
+  h1:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 48px
+    fontWeight: '600'
+    lineHeight: '1.1'
+    letterSpacing: -0.02em
+  h2:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 32px
+    fontWeight: '600'
+    lineHeight: '1.2'
+    letterSpacing: -0.01em
+  h3:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 24px
+    fontWeight: '500'
+    lineHeight: '1.3'
+  body-editorial:
+    fontFamily: Noto Serif
+    fontSize: 18px
+    fontWeight: '400'
+    lineHeight: '1.6'
+  body-ui:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: '1.5'
+  accent-label:
+    fontFamily: Space Grotesk
+    fontSize: 13px
+    fontWeight: '500'
+    lineHeight: '1'
+    letterSpacing: 0.05em
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  base: 4px
+  xs: 8px
+  sm: 16px
+  md: 24px
+  lg: 48px
+  xl: 80px
+  gutter: 24px
+  margin: 32px
+---
+
+## Brand & Style
+
+This design system is built on the philosophy of **Warm Intellectualism**. It balances the rigor of academic research with the approachability of a human-centric product. Drawing inspiration from high-end editorial design and modern AI interfaces, the aesthetic is characterized by expansive whitespace, a tactile paper-like background, and a sophisticated mix of typographic voices.
+
+The style is a refined blend of **Minimalism** and **Tactile Modernism**. It avoids the clinical coldness of typical tech interfaces by utilizing a palette of warm neutrals and organic textures. The focus is on clarity, legibility, and a sense of "breathing room" that allows complex information to feel digestible and calm.
+
+## Colors
+
+The color palette is anchored by a warm, paper-inspired neutral base (#F9F8F0), which provides a soft, low-strain reading environment compared to pure white. 
+
+- **Primary:** A deep, near-black (#191919) used for high-contrast typography and core structural elements.
+- **Secondary (Accent):** A vibrant berry (#E8175D) carried forward to highlight key actions, interactive states, and critical notifications.
+- **Tertiary:** A muted burnt orange (#D97757) used for secondary accents or to differentiate specific content types.
+- **Surface/Neutral:** A slightly deeper beige (#E6E1D3) used for card backgrounds and subtle UI divisions to create a soft, layered depth without resorting to heavy shadows.
+
+## Typography
+
+The typographic system utilizes a tri-font approach to establish a clear information hierarchy:
+
+1.  **Headlines (Plus Jakarta Sans):** Used for primary titles and navigational headers. It provides a contemporary, friendly, and geometric structure.
+2.  **Editorial (Noto Serif):** Reserved for long-form reading, descriptions, and "thoughtful" content. This brings an authoritative, literary quality to the interface.
+3.  **Accents (Space Grotesk):** Employed for small labels, data points, and technical metadata. Its monospaced-adjacent character provides a precise, technical counterpoint to the softer serif text.
+
+*Note: In implementation, ensure a high contrast ratio between the primary text color and the warm background for optimal accessibility.*
+
+## Layout & Spacing
+
+This design system employs a **Fixed Grid** philosophy for desktop layouts to maintain the editorial "columnar" feel, transitioning to a fluid model for mobile. 
+
+- **Grid:** A 12-column grid with a maximum content width of 1280px.
+- **Rhythm:** An 8px linear scale is used for internal component spacing, while larger "breathing room" (48px+) is prioritized between major content sections to prevent visual clutter.
+- **Margins:** Generous page margins (32px minimum) ensure that content never feels cramped against the viewport edges.
+
+## Elevation & Depth
+
+Hierarchy is achieved through **Tonal Layering** supplemented by **Ambient Shadows**. Instead of aggressive elevation, the system uses subtle shifts in background color to denote "lift."
+
+- **Level 0 (Background):** #F9F8F0.
+- **Level 1 (Cards/Surfaces):** White (#FFFFFF) or light beige (#FBFBF9) with a very soft, diffused shadow (Blur: 20px, Y: 4px, Opacity: 4% Black).
+- **Level 2 (Active/Hover):** A slightly more pronounced shadow (Blur: 30px, Y: 8px, Opacity: 6% Black) to indicate interactivity.
+- **Inlays:** Subtle 1px borders using #E6E1D3 are preferred over shadows for input fields and nested containers to maintain a flat, modern aesthetic.
+
+## Shapes
+
+The shape language is defined by **Soft Geometricism**. Rounded corners are used to mitigate the "sharpness" of the technical content, making the interface feel approachable and modern.
+
+- **Standard Radius:** 8px (0.5rem) for small components like buttons and inputs.
+- **Card Radius:** 16px (1rem) for main content containers to create a distinct, structured appearance.
+- **Large Radius:** 24px (1.5rem) for featured sections or promotional banners.
+
+## Components
+
+### Buttons
+- **Primary:** Solid #191919 background with white text. High-contrast and impactful.
+- **Secondary:** Transparent background with a 1px #191919 border.
+- **Accent:** Solid #E8175D for high-priority CTA (Call to Action).
+- **Styling:** 8px corner radius, medium weight Plus Jakarta Sans.
+
+### Cards
+- **Structure:** White background, 16px corner radius, subtle ambient shadow.
+- **Padding:** Generous internal padding (24px or 32px) to maintain the "breathing room" mandate.
+
+### Input Fields
+- **Styling:** Soft beige background (#F4F1ED) with no border in default state. On focus, a 1px #191919 border appears with a subtle inner glow.
+
+### Chips & Tags
+- **Styling:** Use Space Grotesk for the font. Backgrounds should be low-saturation (e.g., #E6E1D3) to keep them secondary to main content.
+
+### Checkboxes & Radios
+- **Styling:** Use the accent color (#E8175D) for the active/checked state to provide a pop of color against the neutral palette.
+
+### Editorial Blocks
+- Used for long-form text. These blocks should strictly use Noto Serif with a max-width of 720px to ensure optimal line length (measure) for readability.

_markemacht.de/dev/first design/artikel-marketingchef.html

@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Was passiert, wenn der Marketingchef geht | Marke macht.</title>
+    <meta name="description" content="In vielen Unternehmen ist das Markenwissen an eine einzige Person gebunden. Wenn diese Person geht, geht das Wissen mit.">
+    
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="pages.css">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="nav" id="nav">
+        <div class="nav-container">
+            <a href="index.html" class="nav-logo">
+                <span class="logo-mark">MM</span>
+            </a>
+            <div class="nav-menu">
+                <a href="index.html" class="nav-link">Start</a>
+                <a href="manifest.html" class="nav-link">Manifest</a>
+                <a href="methode.html" class="nav-link">Methode</a>
+                <a href="blog.html" class="nav-link">Denken</a>
+                <a href="#audit" class="nav-cta">Audit anfragen</a>
+            </div>
+            <button class="nav-toggle" id="navToggle" aria-label="Menü öffnen">
+                <span></span>
+                <span></span>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Mobile Menu -->
+    <div class="nav-mobile" id="navMobile">
+        <a href="index.html" class="nav-mobile-link">Start</a>
+        <a href="manifest.html" class="nav-mobile-link">Manifest</a>
+        <a href="methode.html" class="nav-mobile-link">Methode</a>
+        <a href="blog.html" class="nav-mobile-link">Denken</a>
+        <a href="#audit" class="nav-mobile-cta">Audit anfragen</a>
+    </div>
+
+    <!-- Article Header -->
+    <article class="article">
+        <header class="article-header">
+            <div class="container">
+                <a href="blog.html" class="article-back">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M13 8H3M3 8L8 3M3 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                    <span>Alle Artikel</span>
+                </a>
+                <div class="article-meta">
+                    <span class="article-category">Diagnose</span>
+                    <span class="article-reading">4 Min. Lesezeit</span>
+                </div>
+                <h1 class="article-title">Was passiert, wenn der Marketingchef geht.</h1>
+                <p class="article-lead">In vielen Unternehmen ist das Markenwissen an eine einzige Person gebunden. Wenn diese Person geht, geht das Wissen mit.</p>
+            </div>
+        </header>
+
+        <!-- Article Content -->
+        <div class="article-content">
+            <div class="container container-narrow">
+                <div class="prose">
+                    <p>Es ist ein Muster, das sich wiederholt:</p>
+                    
+                    <p>Ein Unternehmen hat über Jahre eine Kommunikation aufgebaut. Der Marketingchef kennt die Tonalität. Er weiß, was man sagen darf und was nicht. Er hat die Beziehungen zu Agenturen, Dienstleistern, Partnern.</p>
+                    
+                    <p>Dann geht er.</p>
+
+                    <h2>Der Neuanfang</h2>
+                    
+                    <p>Der Nachfolger fängt an zu suchen.</p>
+                    
+                    <p>Wo ist die Positionierung dokumentiert? Gibt es Sprachregeln? Was ist die Argumentation gegenüber Wettbewerb?</p>
+                    
+                    <p>Die Antwort: Nirgendwo.</p>
+                    
+                    <p>Es gibt Powerpoints aus Workshops vor fünf Jahren. Es gibt eine Website, die niemand mehr anfasst. Es gibt Bauchgefühl – aber das gehörte dem Vorgänger.</p>
+
+                    <h2>Das Ergebnis</h2>
+                    
+                    <p>Der neue Marketingchef macht das Einzige, was er kann: Er fängt von vorn an.</p>
+                    
+                    <p>Neue Agentur. Neues Briefing. Neues Konzept.</p>
+                    
+                    <p>Nicht weil das alte schlecht war. Sondern weil es nicht existiert.</p>
+                    
+                    <p>Das Unternehmen hat seine Marke nicht verloren. Es hat sie nie besessen.</p>
+
+                    <h2>Der eigentliche Fehler</h2>
+                    
+                    <p>Das Problem ist nicht der Wechsel. Menschen wechseln. Das ist normal.</p>
+                    
+                    <p>Das Problem ist, dass Markenwissen in Köpfen existiert, nicht in Systemen.</p>
+                    
+                    <p>Es ist implizit, nicht dokumentiert. Fragmentiert, nicht strukturiert. Flüchtig, nicht vererbbar.</p>
+
+                    <h2>Die Kosten</h2>
+                    
+                    <p>Jeder Neuanfang kostet:</p>
+                    
+                    <p><strong>Zeit</strong> – Monate, bis die neue Richtung steht.</p>
+                    <p><strong>Geld</strong> – Agenturen, Berater, Redesigns.</p>
+                    <p><strong>Konsistenz</strong> – Die Außenwelt merkt den Bruch.</p>
+                    
+                    <p>Und das Schlimmste: Es passiert immer wieder. Bei jedem Wechsel. Bei jeder Agentur. Bei jeder Umstrukturierung.</p>
+
+                    <h2>Was das offenlegt</h2>
+                    
+                    <p>Wenn ein Unternehmen seinen Marketingchef nicht ersetzen kann, ohne die Marke neu zu erfinden, dann hatte es keine Marke.</p>
+                    
+                    <p>Es hatte eine Person, die die Marke kannte.</p>
+                    
+                    <p>Das ist nicht dasselbe.</p>
+                    
+                    <div class="article-highlight">
+                        <p>Eine Marke, die an Personen hängt, ist keine Marke. Sie ist ein Risiko.</p>
+                    </div>
+                    
+                    <p>Die Frage ist nicht, ob der Wechsel kommt. Die Frage ist, ob das Unternehmen dann noch weiß, wofür es steht.</p>
+                </div>
+
+                <!-- Article Footer -->
+                <footer class="article-footer">
+                    <div class="article-cta">
+                        <p>Wie man Markenwissen dokumentiert:</p>
+                        <a href="methode.html" class="btn btn-secondary">
+                            <span>Die Methode verstehen</span>
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                        </a>
+                    </div>
+                </footer>
+            </div>
+        </div>
+    </article>
+
+    <!-- More Articles -->
+    <section class="section section-alt">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Weitere Artikel</h2>
+            </div>
+            <div class="blog-list blog-list-compact">
+                <article class="blog-card">
+                    <a href="artikel-vergleichbarkeit.html" class="blog-card-inner">
+                        <div class="blog-card-meta">
+                            <span class="blog-card-number">[01]</span>
+                            <span class="blog-card-category">Diagnose</span>
+                        </div>
+                        <h2 class="blog-card-title">Warum Vergleichbarkeit kein Preisproblem ist.</h2>
+                        <span class="blog-card-link">
+                            <span>Lesen</span>
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                        </span>
+                    </a>
+                </article>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="section section-cta" id="audit">
+        <div class="container">
+            <div class="cta-block">
+                <h2 class="cta-headline">Bereit für Klarheit?</h2>
+                <p class="cta-text">Das Marken-Klarheits-Audit zeigt in 7–10 Tagen, wo Ihr Unternehmen sprachlich steht – und was die nächsten Schritte sind.</p>
+                <a href="mailto:info@markemacht.de?subject=Marken-Klarheits-Audit" class="btn btn-primary btn-large">
+                    <span>Audit anfragen</span>
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-inner">
+                <div class="footer-brand">
+                    <span class="logo-mark">MM</span>
+                    <p class="footer-tagline">Marke macht.<br>Weil Klarheit Macht ist.</p>
+                </div>
+                <div class="footer-links">
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Navigation</h4>
+                        <a href="index.html">Start</a>
+                        <a href="manifest.html">Manifest</a>
+                        <a href="methode.html">Methode</a>
+                        <a href="blog.html">Denken</a>
+                    </div>
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Rechtliches</h4>
+                        <a href="#impressum">Impressum</a>
+                        <a href="#datenschutz">Datenschutz</a>
+                    </div>
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Kontakt</h4>
+                        <a href="mailto:info@markemacht.de">info@markemacht.de</a>
+                        <a href="https://adametz.media" target="_blank">adametz.media</a>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© 2025 Marke macht. – Eine Methode von <a href="https://adametz.media" target="_blank">Kevin Adametz</a></p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="main.js"></script>
+</body>
+</html>

_markemacht.de/dev/first design/artikel-vergleichbarkeit.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Warum Vergleichbarkeit kein Preisproblem ist | Marke macht.</title>
+    <meta name="description" content="Wenn Kunden nur noch über den Preis entscheiden, liegt das selten am Preis. Es liegt daran, dass sie keinen anderen Unterschied erkennen können.">
+    
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="pages.css">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="nav" id="nav">
+        <div class="nav-container">
+            <a href="index.html" class="nav-logo">
+                <span class="logo-mark">MM</span>
+            </a>
+            <div class="nav-menu">
+                <a href="index.html" class="nav-link">Start</a>
+                <a href="manifest.html" class="nav-link">Manifest</a>
+                <a href="methode.html" class="nav-link">Methode</a>
+                <a href="blog.html" class="nav-link">Denken</a>
+                <a href="#audit" class="nav-cta">Audit anfragen</a>
+            </div>
+            <button class="nav-toggle" id="navToggle" aria-label="Menü öffnen">
+                <span></span>
+                <span></span>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Mobile Menu -->
+    <div class="nav-mobile" id="navMobile">
+        <a href="index.html" class="nav-mobile-link">Start</a>
+        <a href="manifest.html" class="nav-mobile-link">Manifest</a>
+        <a href="methode.html" class="nav-mobile-link">Methode</a>
+        <a href="blog.html" class="nav-mobile-link">Denken</a>
+        <a href="#audit" class="nav-mobile-cta">Audit anfragen</a>
+    </div>
+
+    <!-- Article Header -->
+    <article class="article">
+        <header class="article-header">
+            <div class="container">
+                <a href="blog.html" class="article-back">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M13 8H3M3 8L8 3M3 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                    <span>Alle Artikel</span>
+                </a>
+                <div class="article-meta">
+                    <span class="article-category">Diagnose</span>
+                    <span class="article-reading">4 Min. Lesezeit</span>
+                </div>
+                <h1 class="article-title">Warum Vergleichbarkeit kein Preisproblem ist.</h1>
+                <p class="article-lead">Wenn Kunden nur noch über den Preis entscheiden, liegt das selten am Preis. Es liegt daran, dass sie keinen anderen Unterschied erkennen können.</p>
+            </div>
+        </header>
+
+        <!-- Article Content -->
+        <div class="article-content">
+            <div class="container container-narrow">
+                <div class="prose">
+                    <p>Die meisten Unternehmen glauben, sie hätten ein Wettbewerbsproblem. Die Konkurrenz ist billiger. Der Markt ist übersättigt. Also senken sie Preise, erhöhen Rabatte, versprechen mehr Leistung.</p>
+                    
+                    <p>Das funktioniert nicht.</p>
+                    
+                    <p>Nicht weil die Strategie falsch wäre, sondern weil die Diagnose falsch ist.</p>
+
+                    <h2>Das eigentliche Problem</h2>
+                    
+                    <p>Vergleichbarkeit entsteht nicht durch ähnliche Produkte. Sie entsteht durch ähnliche Erklärungen.</p>
+                    
+                    <p>Wenn zwei Unternehmen dasselbe sagen – dieselben Begriffe, dieselben Versprechen, dieselben Floskeln – dann sind sie austauschbar.</p>
+                    
+                    <p>Nicht weil sie gleich sind. Sondern weil sie gleich klingen.</p>
+
+                    <h2>Der Mechanismus</h2>
+                    
+                    <p>Ein Kunde, der nicht versteht, warum er bei Ihnen kaufen soll, hat nur noch ein Kriterium: den Preis.</p>
+                    
+                    <p>Nicht weil er nur auf den Preis schaut. Sondern weil Sie ihm nichts anderes gegeben haben.</p>
+                    
+                    <p>„Qualität", „Erfahrung", „Kundennähe" – das sagen alle.</p>
+                    
+                    <p>Was bleibt, ist die Zahl auf dem Angebot.</p>
+
+                    <h2>Die unbequeme Wahrheit</h2>
+                    
+                    <p>Vergleichbarkeit ist kein Marktproblem. Sie ist ein Kommunikationsproblem.</p>
+                    
+                    <p>Genauer: ein Klarheitsproblem.</p>
+                    
+                    <p>Wer nicht klar erklären kann, wofür er steht, wird verglichen. Wer verglichen wird, wird am Preis gemessen. Wer am Preis gemessen wird, verliert Marge.</p>
+
+                    <h2>Was das bedeutet</h2>
+                    
+                    <p>Preisdruck ist ein Symptom. Die Ursache liegt tiefer.</p>
+                    
+                    <p>Sie liegt in der Unfähigkeit, sich eindeutig zu erklären.</p>
+                    
+                    <div class="article-highlight">
+                        <p>Die Lösung ist nicht besseres Marketing. Die Lösung ist Klarheit darüber, was dieses Unternehmen von allen anderen unterscheidet – und die Fähigkeit, das konsistent zu kommunizieren.</p>
+                    </div>
+                    
+                    <p>Solange das nicht existiert, bleibt nur der Preis.</p>
+                </div>
+
+                <!-- Article Footer -->
+                <footer class="article-footer">
+                    <div class="article-cta">
+                        <p>Mehr dazu im Manifest:</p>
+                        <a href="manifest.html" class="btn btn-secondary">
+                            <span>Warum Marke kein Marketingthema ist</span>
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                        </a>
+                    </div>
+                </footer>
+            </div>
+        </div>
+    </article>
+
+    <!-- More Articles -->
+    <section class="section section-alt">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Weitere Artikel</h2>
+            </div>
+            <div class="blog-list blog-list-compact">
+                <article class="blog-card">
+                    <a href="artikel-marketingchef.html" class="blog-card-inner">
+                        <div class="blog-card-meta">
+                            <span class="blog-card-number">[02]</span>
+                            <span class="blog-card-category">Diagnose</span>
+                        </div>
+                        <h2 class="blog-card-title">Was passiert, wenn der Marketingchef geht.</h2>
+                        <span class="blog-card-link">
+                            <span>Lesen</span>
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                        </span>
+                    </a>
+                </article>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="section section-cta" id="audit">
+        <div class="container">
+            <div class="cta-block">
+                <h2 class="cta-headline">Bereit für Klarheit?</h2>
+                <p class="cta-text">Das Marken-Klarheits-Audit zeigt in 7–10 Tagen, wo Ihr Unternehmen sprachlich steht – und was die nächsten Schritte sind.</p>
+                <a href="mailto:info@markemacht.de?subject=Marken-Klarheits-Audit" class="btn btn-primary btn-large">
+                    <span>Audit anfragen</span>
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-inner">
+                <div class="footer-brand">
+                    <span class="logo-mark">MM</span>
+                    <p class="footer-tagline">Marke macht.<br>Weil Klarheit Macht ist.</p>
+                </div>
+                <div class="footer-links">
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Navigation</h4>
+                        <a href="index.html">Start</a>
+                        <a href="manifest.html">Manifest</a>
+                        <a href="methode.html">Methode</a>
+                        <a href="blog.html">Denken</a>
+                    </div>
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Rechtliches</h4>
+                        <a href="#impressum">Impressum</a>
+                        <a href="#datenschutz">Datenschutz</a>
+                    </div>
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Kontakt</h4>
+                        <a href="mailto:info@markemacht.de">info@markemacht.de</a>
+                        <a href="https://adametz.media" target="_blank">adametz.media</a>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© 2025 Marke macht. – Eine Methode von <a href="https://adametz.media" target="_blank">Kevin Adametz</a></p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="main.js"></script>
+</body>
+</html>

_markemacht.de/dev/first design/blog.html

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Denken – Artikel über Marke und Klarheit | Marke macht.</title>
+    <meta name="description" content="Artikel über Marke, Klarheit und die Frage, warum Unternehmen oft nicht sagen können, wofür sie stehen.">
+    
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="pages.css">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="nav" id="nav">
+        <div class="nav-container">
+            <a href="index.html" class="nav-logo">
+                <span class="logo-mark">MM</span>
+            </a>
+            <div class="nav-menu">
+                <a href="index.html" class="nav-link">Start</a>
+                <a href="manifest.html" class="nav-link">Manifest</a>
+                <a href="methode.html" class="nav-link">Methode</a>
+                <a href="blog.html" class="nav-link active">Denken</a>
+                <a href="#audit" class="nav-cta">Audit anfragen</a>
+            </div>
+            <button class="nav-toggle" id="navToggle" aria-label="Menü öffnen">
+                <span></span>
+                <span></span>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Mobile Menu -->
+    <div class="nav-mobile" id="navMobile">
+        <a href="index.html" class="nav-mobile-link">Start</a>
+        <a href="manifest.html" class="nav-mobile-link">Manifest</a>
+        <a href="methode.html" class="nav-mobile-link">Methode</a>
+        <a href="blog.html" class="nav-mobile-link active">Denken</a>
+        <a href="#audit" class="nav-mobile-cta">Audit anfragen</a>
+    </div>
+
+    <!-- Page Hero -->
+    <section class="page-hero">
+        <div class="container">
+            <div class="page-hero-content">
+                <p class="page-label">Blog</p>
+                <h1 class="page-title">Denken.</h1>
+                <p class="page-intro">Artikel über Marke, Klarheit und die Frage, warum Unternehmen oft nicht sagen können, wofür sie stehen.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Blog Filter -->
+    <section class="section section-filter">
+        <div class="container">
+            <div class="filter-bar">
+                <button class="filter-btn active" data-filter="all">Alle</button>
+                <button class="filter-btn" data-filter="diagnose">Diagnose</button>
+                <button class="filter-btn" data-filter="einordnung">Einordnung</button>
+                <button class="filter-btn" data-filter="system">System</button>
+            </div>
+        </div>
+    </section>
+
+    <!-- Blog List -->
+    <section class="section section-blog">
+        <div class="container">
+            <div class="blog-list">
+                <!-- Article 1 -->
+                <article class="blog-card" data-category="diagnose">
+                    <a href="artikel-vergleichbarkeit.html" class="blog-card-inner">
+                        <div class="blog-card-meta">
+                            <span class="blog-card-number">[01]</span>
+                            <span class="blog-card-category">Diagnose</span>
+                        </div>
+                        <h2 class="blog-card-title">Warum Vergleichbarkeit kein Preisproblem ist.</h2>
+                        <p class="blog-card-excerpt">Wenn Kunden nur noch über den Preis entscheiden, liegt das selten am Preis. Es liegt daran, dass sie keinen anderen Unterschied erkennen können.</p>
+                        <span class="blog-card-link">
+                            <span>Lesen</span>
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                        </span>
+                    </a>
+                </article>
+
+                <!-- Article 2 -->
+                <article class="blog-card" data-category="diagnose">
+                    <a href="artikel-marketingchef.html" class="blog-card-inner">
+                        <div class="blog-card-meta">
+                            <span class="blog-card-number">[02]</span>
+                            <span class="blog-card-category">Diagnose</span>
+                        </div>
+                        <h2 class="blog-card-title">Was passiert, wenn der Marketingchef geht.</h2>
+                        <p class="blog-card-excerpt">In vielen Unternehmen ist das Markenwissen an eine einzige Person gebunden. Wenn diese Person geht, geht das Wissen mit.</p>
+                        <span class="blog-card-link">
+                            <span>Lesen</span>
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                        </span>
+                    </a>
+                </article>
+
+                <!-- Placeholder Articles (for later) -->
+                <article class="blog-card blog-card-upcoming" data-category="einordnung">
+                    <div class="blog-card-inner">
+                        <div class="blog-card-meta">
+                            <span class="blog-card-number">[03]</span>
+                            <span class="blog-card-category">Einordnung</span>
+                            <span class="blog-card-soon">Bald</span>
+                        </div>
+                        <h2 class="blog-card-title">Warum KI Ihr Markenproblem nicht löst.</h2>
+                        <p class="blog-card-excerpt">KI verstärkt, was bereits existiert. Wer unklar ist, wird durch KI schneller unklar.</p>
+                    </div>
+                </article>
+
+                <article class="blog-card blog-card-upcoming" data-category="einordnung">
+                    <div class="blog-card-inner">
+                        <div class="blog-card-meta">
+                            <span class="blog-card-number">[04]</span>
+                            <span class="blog-card-category">Einordnung</span>
+                            <span class="blog-card-soon">Bald</span>
+                        </div>
+                        <h2 class="blog-card-title">Der Unterschied zwischen Marke und Marketing.</h2>
+                        <p class="blog-card-excerpt">Marketing ist ein Kanal. Marke ist die Voraussetzung, dass der Kanal funktioniert.</p>
+                    </div>
+                </article>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="section section-cta" id="audit">
+        <div class="container">
+            <div class="cta-block">
+                <h2 class="cta-headline">Bereit für Klarheit?</h2>
+                <p class="cta-text">Das Marken-Klarheits-Audit zeigt in 7–10 Tagen, wo Ihr Unternehmen sprachlich steht – und was die nächsten Schritte sind.</p>
+                <a href="mailto:info@markemacht.de?subject=Marken-Klarheits-Audit" class="btn btn-primary btn-large">
+                    <span>Audit anfragen</span>
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-inner">
+                <div class="footer-brand">
+                    <span class="logo-mark">MM</span>
+                    <p class="footer-tagline">Marke macht.<br>Weil Klarheit Macht ist.</p>
+                </div>
+                <div class="footer-links">
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Navigation</h4>
+                        <a href="index.html">Start</a>
+                        <a href="manifest.html">Manifest</a>
+                        <a href="methode.html">Methode</a>
+                        <a href="blog.html">Denken</a>
+                    </div>
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Rechtliches</h4>
+                        <a href="#impressum">Impressum</a>
+                        <a href="#datenschutz">Datenschutz</a>
+                    </div>
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Kontakt</h4>
+                        <a href="mailto:info@markemacht.de">info@markemacht.de</a>
+                        <a href="https://adametz.media" target="_blank">adametz.media</a>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© 2025 Marke macht. – Eine Methode von <a href="https://adametz.media" target="_blank">Kevin Adametz</a></p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="main.js"></script>
+    <script>
+        // Blog Filter
+        const filterBtns = document.querySelectorAll('.filter-btn');
+        const blogCards = document.querySelectorAll('.blog-card');
+
+        filterBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const filter = btn.dataset.filter;
+                
+                filterBtns.forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                
+                blogCards.forEach(card => {
+                    if (filter === 'all' || card.dataset.category === filter) {
+                        card.style.display = 'block';
+                    } else {
+                        card.style.display = 'none';
+                    }
+                });
+            });
+        });
+    </script>
+</body>
+</html>

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

@@ -0,0 +1,573 @@
+# Text-Skript markemacht.de
+
+Extrahierter Text aus allen HTML-Seiten. Strukturiert nach Seite, Sektion und Element. Navigation und Footer nur einmal am Ende.
+
+---
+
+## 1. STARTSEITE (index.html)
+
+**Meta-Title:** Marke macht. – Wenn Klarheit Macht ist
+**Meta-Description:** Ein Denkrahmen für unternehmerische Klarheit. Marke ist kein Designprojekt. Marke ist ein Führungsinstrument.
+
+### Hero
+
+**Headline:**
+Wenn Sie Ihr Unternehmen
+nicht erklären können,
+haben Sie kein Marketingproblem.
+
+**Subline:**
+Sie haben ein Markenproblem.
+
+**Button:** Warum das so ist
+
+---
+
+### Die Symptome
+
+**Label:** Die Symptome
+
+**Überschrift:**
+Drei Anzeichen, dass Ihr Unternehmen
+sprachlich handlungsunfähig ist.
+
+**[01] Jeder erklärt das Unternehmen anders.**
+Vertrieb sagt etwas anderes als Marketing. Die Website erzählt eine dritte Geschichte.
+
+**[02] Kommunikation hängt an Personen.**
+Wenn der Marketingchef geht, geht das Markenwissen mit. Wenn die Agentur wechselt, fängt alles von vorn an.
+
+**[03] Mehr Content, weniger Wirkung.**
+KI produziert schneller, aber nicht klarer. Die Menge steigt, die Erkennbarkeit sinkt.
+
+---
+
+### Zitat
+
+„Marke ist kein Gefühl.
+Marke ist ein Regelwerk."
+
+---
+
+### Das Problem
+
+**Überschrift:** Das Problem ist nicht Kreativität.
+
+**Text:**
+Das Problem ist fehlende Struktur.
+
+Marketing, Werbung und KI verschärfen dieses Problem, weil sie Ausdruck verlangen, bevor Klarheit existiert.
+
+**Button:** Das Manifest lesen
+
+---
+
+### Was ist „Marke macht."
+
+**Label:** Was ist „Marke macht."
+
+**Überschrift:**
+Ein Denkrahmen für
+unternehmerische Klarheit.
+
+**Text:**
+„Marke macht." ist keine Agentur.
+Kein Content-Studio. Kein KI-Tool.
+
+Sondern eine Methode, die Unternehmen befähigt, sich selbst eindeutig zu erklären – konsistent, dokumentiert, unabhängig von Personen.
+
+**Button:** Die Methode verstehen
+
+---
+
+### Call-to-Action (globale Sektion)
+
+**Überschrift:** Bereit für Klarheit?
+
+**Text:**
+Das Marken-Klarheits-Audit zeigt in 7–10 Tagen, wo Ihr Unternehmen sprachlich steht – und was die nächsten Schritte sind.
+
+**Button:** Audit anfragen
+
+---
+---
+
+## 2. MANIFEST (manifest.html)
+
+**Meta-Title:** Manifest – Warum Marke kein Marketingthema ist | Marke macht.
+**Meta-Description:** Der deutsche Mittelstand leidet nicht an schlechten Produkten. Er leidet an einem strukturellen Defizit: Unternehmen sind wirtschaftlich leistungsfähig, aber sprachlich handlungsunfähig.
+
+### Page-Hero
+
+**Label:** Das Manifest
+
+**Überschrift:**
+Warum Marke kein
+Marketingthema ist.
+
+---
+
+### Einleitung
+
+Der deutsche Mittelstand leidet nicht an schlechten Produkten. Nicht an fehlender Qualität. Nicht an mangelndem Know-how.
+
+Er leidet an einem strukturellen Defizit: Unternehmen sind wirtschaftlich leistungsfähig, aber sprachlich handlungsunfähig.
+
+---
+
+### Was das konkret bedeutet.
+
+**[01] Keine Erklärbarkeit**
+Die meisten Unternehmen können nicht klar sagen, wofür sie stehen. Nicht weil sie es nicht wissen. Sondern weil es nirgendwo festgelegt ist.
+
+**[02] Keine Konsistenz**
+Jede Abteilung, jeder Mitarbeiter, jede Agentur erzählt eine leicht andere Version. Das ist kein Abstimmungsproblem. Das ist ein Strukturproblem.
+
+**[03] Keine Unabhängigkeit**
+Markenwissen existiert in Köpfen. Nicht in Systemen. Wenn Menschen gehen, geht das Wissen mit.
+
+**[04] Keine Vererbbarkeit**
+Neue Mitarbeiter lernen durch Osmose. Neue Agenturen fangen bei null an. Nichts ist dokumentiert. Nichts ist übertragbar.
+
+---
+
+### Wohin das führt.
+
+Ohne sprachliche Klarheit keine Identität.
+Ohne Identität keine Marke.
+Ohne Marke nur Vergleichbarkeit.
+
+**Fazit:** Vergleichbarkeit führt immer zum Preis.
+
+---
+
+### Warum KI das Problem verschärft.
+
+KI kann Inhalte produzieren. Schneller als je zuvor.
+
+Aber KI kann keine Klarheit erzeugen. Sie kann nur verstärken, was bereits existiert.
+
+**Hervorhebung:** Wer unklar ist, wird durch KI schneller unklar – und in größerer Menge.
+
+---
+
+### Zentralthese (Zitat)
+
+„Marke ist nicht Design.
+Marke ist nicht Marketing.
+
+Marke ist die Fähigkeit eines Unternehmens, sich selbst eindeutig zu erklären."
+
+---
+
+### Lösung
+
+**Überschrift:**
+Wenn Marke ein Strukturproblem ist,
+braucht sie eine strukturelle Lösung.
+
+**Nicht:**
+- ein neues Logo
+- eine neue Website
+- mehr Content
+
+**Sondern:**
+Ein System aus Regeln, Entscheidungen und Grenzen, das dauerhaft handlungsfähig macht.
+
+**Button:** Die Methode verstehen
+
+---
+---
+
+## 3. METHODE (methode.html)
+
+**Meta-Title:** Methode – Brand Engineering | Marke macht.
+**Meta-Description:** Brand Engineering: Ein ingenieurhaftes Verständnis von Marke. Marke wird nicht entwickelt – sie wird gebaut. Marke wird nicht gefühlt – sie wird dokumentiert.
+
+### Page-Hero
+
+**Label:** Die Methode
+
+**Überschrift:** Brand Engineering.
+
+---
+
+### Einleitung
+
+**Lead:** Ein ingenieurhaftes Verständnis von Marke.
+
+**Kontrast 1:**
+Marke wird nicht „entwickelt".
+Marke wird gebaut.
+
+**Kontrast 2:**
+Marke wird nicht „gefühlt".
+Marke wird dokumentiert.
+
+**Kontrast 3:**
+Marke wird nicht präsentiert.
+Marke wird nutzbar gemacht.
+
+---
+
+### Die Marken-DNA.
+
+Jede Marke braucht ein operatives Regelwerk. Kein Leitbild. Kein Manifest. Keine Powerpoint.
+
+Sondern eine dokumentierte Struktur, die festlegt:
+
+- Wer wir sind (jenseits von Produkten)
+- Warum wir, nicht die anderen
+- Wie wir sprechen, wie niemals
+- Worüber wir reden, worüber nicht
+- Was wir niemals tun
+
+---
+
+### Woraus eine Marken-DNA besteht.
+
+**[01] Identitätskern**
+*Wer sind wir – jenseits von Produkten?*
+Das Selbstverständnis, die Haltung, die Motivation. Ohne Marktbegriffe. Ohne Kundenargumente.
+
+**[02] Positionierungslogik**
+*Warum wir – und nicht die anderen?*
+Nicht was wir besser machen, sondern nach welcher Logik wir anders sind.
+
+**[03] Sprach- und Tonalitätsregeln**
+*Wie sprechen wir – und wie niemals?*
+Explizite Regeln für Sprache, Ton und Argumentation. Was erlaubt ist. Was verboten ist.
+
+**[04] Themen- und Relevanzrahmen**
+*Worüber sprechen wir – und worüber bewusst nicht?*
+Ein klarer Themenkorridor. Fokus statt Beliebigkeit.
+
+**[05] Entscheidungs- und Grenzregeln**
+*Was darf diese Marke niemals tun?*
+Explizite Grenzen für Verhalten, Aussagen, Auftritte. Grenzen sind wichtiger als Botschaften.
+
+---
+
+### Zitat
+
+„Eine Marke, die nicht strukturiert existiert,
+kann nicht geführt werden."
+
+---
+
+### Wenn die Marken-DNA existiert.
+
+- Teams können selbstständig markengerecht arbeiten
+- Neue Mitarbeiter sind in Tagen sprachfähig, nicht Wochen
+- Agenturen haben einen klaren Rahmen
+- KI arbeitet regelbasiert, nicht generisch
+- Kommunikation wird reproduzierbar und kontrollierbar
+
+---
+
+### Klare Abgrenzung.
+
+Brand Engineering ist nicht:
+
+- ein Kreativworkshop
+- ein Leitbildprozess
+- ein Agentur-Briefing
+- ein Marketing-Meeting
+
+**Fazit:** Es ist ein unternehmerischer Klärungsprozess.
+
+---
+
+### Wie Klarheit entsteht.
+
+**Intro:** Das Marken-Klarheits-Audit ist der Einstieg.
+
+In 7–10 Tagen entsteht:
+
+- Eine Analyse des Ist-Zustands
+- Die vollständige Marken-DNA v1.0
+- Eine Validierung an realen Inhalten
+- Eine klare Handlungsempfehlung
+
+---
+
+### Über den Autor
+
+„Marke macht." wurde entwickelt von **Kevin Adametz** – Markenarchitekt und Gründer von ADAMETZ.MEDIA.
+
+Seit über 20 Jahren arbeitet er mit Unternehmen an der Frage, wie sie sich erklären.
+
+**Button:** Mehr über Kevin Adametz
+
+---
+---
+
+## 4. DENKEN / BLOG-ÜBERSICHT (blog.html)
+
+**Meta-Title:** Denken – Artikel über Marke und Klarheit | Marke macht.
+**Meta-Description:** Artikel über Marke, Klarheit und die Frage, warum Unternehmen oft nicht sagen können, wofür sie stehen.
+
+### Page-Hero
+
+**Label:** Blog
+
+**Überschrift:** Denken.
+
+**Intro:**
+Artikel über Marke, Klarheit und die Frage, warum Unternehmen oft nicht sagen können, wofür sie stehen.
+
+---
+
+### Filter-Kategorien
+
+- Alle
+- Diagnose
+- Einordnung
+- System
+
+---
+
+### Artikel-Liste
+
+**[01] Kategorie: Diagnose**
+Titel: Warum Vergleichbarkeit kein Preisproblem ist.
+Teaser: Wenn Kunden nur noch über den Preis entscheiden, liegt das selten am Preis. Es liegt daran, dass sie keinen anderen Unterschied erkennen können.
+
+**[02] Kategorie: Diagnose**
+Titel: Was passiert, wenn der Marketingchef geht.
+Teaser: In vielen Unternehmen ist das Markenwissen an eine einzige Person gebunden. Wenn diese Person geht, geht das Wissen mit.
+
+**[03] Kategorie: Einordnung (Bald)**
+Titel: Warum KI Ihr Markenproblem nicht löst.
+Teaser: KI verstärkt, was bereits existiert. Wer unklar ist, wird durch KI schneller unklar.
+
+**[04] Kategorie: Einordnung (Bald)**
+Titel: Der Unterschied zwischen Marke und Marketing.
+Teaser: Marketing ist ein Kanal. Marke ist die Voraussetzung, dass der Kanal funktioniert.
+
+---
+---
+
+## 5. ARTIKEL: VERGLEICHBARKEIT (artikel-vergleichbarkeit.html)
+
+**Meta-Title:** Warum Vergleichbarkeit kein Preisproblem ist | Marke macht.
+**Meta-Description:** Wenn Kunden nur noch über den Preis entscheiden, liegt das selten am Preis. Es liegt daran, dass sie keinen anderen Unterschied erkennen können.
+
+### Artikel-Header
+
+**Kategorie:** Diagnose
+**Lesedauer:** 4 Min. Lesezeit
+**Back-Link:** Alle Artikel
+
+**Titel:** Warum Vergleichbarkeit kein Preisproblem ist.
+
+**Lead:**
+Wenn Kunden nur noch über den Preis entscheiden, liegt das selten am Preis. Es liegt daran, dass sie keinen anderen Unterschied erkennen können.
+
+---
+
+### Einleitung
+
+Die meisten Unternehmen glauben, sie hätten ein Wettbewerbsproblem. Die Konkurrenz ist billiger. Der Markt ist übersättigt. Also senken sie Preise, erhöhen Rabatte, versprechen mehr Leistung.
+
+Das funktioniert nicht.
+
+Nicht weil die Strategie falsch wäre, sondern weil die Diagnose falsch ist.
+
+---
+
+### Das eigentliche Problem
+
+Vergleichbarkeit entsteht nicht durch ähnliche Produkte. Sie entsteht durch ähnliche Erklärungen.
+
+Wenn zwei Unternehmen dasselbe sagen – dieselben Begriffe, dieselben Versprechen, dieselben Floskeln – dann sind sie austauschbar.
+
+Nicht weil sie gleich sind. Sondern weil sie gleich klingen.
+
+---
+
+### Der Mechanismus
+
+Ein Kunde, der nicht versteht, warum er bei Ihnen kaufen soll, hat nur noch ein Kriterium: den Preis.
+
+Nicht weil er nur auf den Preis schaut. Sondern weil Sie ihm nichts anderes gegeben haben.
+
+„Qualität", „Erfahrung", „Kundennähe" – das sagen alle.
+
+Was bleibt, ist die Zahl auf dem Angebot.
+
+---
+
+### Die unbequeme Wahrheit
+
+Vergleichbarkeit ist kein Marktproblem. Sie ist ein Kommunikationsproblem.
+
+Genauer: ein Klarheitsproblem.
+
+Wer nicht klar erklären kann, wofür er steht, wird verglichen. Wer verglichen wird, wird am Preis gemessen. Wer am Preis gemessen wird, verliert Marge.
+
+---
+
+### Was das bedeutet
+
+Preisdruck ist ein Symptom. Die Ursache liegt tiefer.
+
+Sie liegt in der Unfähigkeit, sich eindeutig zu erklären.
+
+**Highlight-Box:**
+Die Lösung ist nicht besseres Marketing. Die Lösung ist Klarheit darüber, was dieses Unternehmen von allen anderen unterscheidet – und die Fähigkeit, das konsistent zu kommunizieren.
+
+Solange das nicht existiert, bleibt nur der Preis.
+
+---
+
+### Artikel-CTA
+
+**Intro:** Mehr dazu im Manifest:
+**Button:** Warum Marke kein Marketingthema ist
+
+---
+---
+
+## 6. ARTIKEL: MARKETINGCHEF (artikel-marketingchef.html)
+
+**Meta-Title:** Was passiert, wenn der Marketingchef geht | Marke macht.
+**Meta-Description:** In vielen Unternehmen ist das Markenwissen an eine einzige Person gebunden. Wenn diese Person geht, geht das Wissen mit.
+
+### Artikel-Header
+
+**Kategorie:** Diagnose
+**Lesedauer:** 4 Min. Lesezeit
+**Back-Link:** Alle Artikel
+
+**Titel:** Was passiert, wenn der Marketingchef geht.
+
+**Lead:**
+In vielen Unternehmen ist das Markenwissen an eine einzige Person gebunden. Wenn diese Person geht, geht das Wissen mit.
+
+---
+
+### Einleitung
+
+Es ist ein Muster, das sich wiederholt:
+
+Ein Unternehmen hat über Jahre eine Kommunikation aufgebaut. Der Marketingchef kennt die Tonalität. Er weiß, was man sagen darf und was nicht. Er hat die Beziehungen zu Agenturen, Dienstleistern, Partnern.
+
+Dann geht er.
+
+---
+
+### Der Neuanfang
+
+Der Nachfolger fängt an zu suchen.
+
+Wo ist die Positionierung dokumentiert? Gibt es Sprachregeln? Was ist die Argumentation gegenüber Wettbewerb?
+
+Die Antwort: Nirgendwo.
+
+Es gibt Powerpoints aus Workshops vor fünf Jahren. Es gibt eine Website, die niemand mehr anfasst. Es gibt Bauchgefühl – aber das gehörte dem Vorgänger.
+
+---
+
+### Das Ergebnis
+
+Der neue Marketingchef macht das Einzige, was er kann: Er fängt von vorn an.
+
+Neue Agentur. Neues Briefing. Neues Konzept.
+
+Nicht weil das alte schlecht war. Sondern weil es nicht existiert.
+
+Das Unternehmen hat seine Marke nicht verloren. Es hat sie nie besessen.
+
+---
+
+### Der eigentliche Fehler
+
+Das Problem ist nicht der Wechsel. Menschen wechseln. Das ist normal.
+
+Das Problem ist, dass Markenwissen in Köpfen existiert, nicht in Systemen.
+
+Es ist implizit, nicht dokumentiert. Fragmentiert, nicht strukturiert. Flüchtig, nicht vererbbar.
+
+---
+
+### Die Kosten
+
+Jeder Neuanfang kostet:
+
+**Zeit** – Monate, bis die neue Richtung steht.
+**Geld** – Agenturen, Berater, Redesigns.
+**Konsistenz** – Die Außenwelt merkt den Bruch.
+
+Und das Schlimmste: Es passiert immer wieder. Bei jedem Wechsel. Bei jeder Agentur. Bei jeder Umstrukturierung.
+
+---
+
+### Was das offenlegt
+
+Wenn ein Unternehmen seinen Marketingchef nicht ersetzen kann, ohne die Marke neu zu erfinden, dann hatte es keine Marke.
+
+Es hatte eine Person, die die Marke kannte.
+
+Das ist nicht dasselbe.
+
+**Highlight-Box:**
+Eine Marke, die an Personen hängt, ist keine Marke. Sie ist ein Risiko.
+
+Die Frage ist nicht, ob der Wechsel kommt. Die Frage ist, ob das Unternehmen dann noch weiß, wofür es steht.
+
+---
+
+### Artikel-CTA
+
+**Intro:** Wie man Markenwissen dokumentiert:
+**Button:** Die Methode verstehen
+
+---
+---
+
+## 7. GLOBALE ELEMENTE
+
+### Navigation (Hauptmenü)
+
+- Start
+- Manifest
+- Methode
+- Denken
+- Audit anfragen (CTA)
+
+### Globaler CTA-Block (auf jeder Seite)
+
+**Überschrift:** Bereit für Klarheit?
+
+**Text:**
+Das Marken-Klarheits-Audit zeigt in 7–10 Tagen, wo Ihr Unternehmen sprachlich steht – und was die nächsten Schritte sind.
+
+**Button:** Audit anfragen
+
+### Footer
+
+**Brand-Tagline:**
+Marke macht.
+Weil Klarheit Macht ist.
+
+**Footer-Spalte: Navigation**
+- Start
+- Manifest
+- Methode
+- Denken
+
+**Footer-Spalte: Rechtliches**
+- Impressum
+- Datenschutz
+
+**Footer-Spalte: Kontakt**
+- info@markemacht.de
+- adametz.media
+
+**Footer-Bottom:**
+© 2025 Marke macht. – Eine Methode von Kevin Adametz
+
+---
+
+### Ende — Text-Skript markemacht.de

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

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

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

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

_markemacht.de/dev/first design/index.html

@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Marke macht. – Wenn Klarheit Macht ist</title>
+    <meta name="description" content="Ein Denkrahmen für unternehmerische Klarheit. Marke ist kein Designprojekt. Marke ist ein Führungsinstrument.">
+    
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="nav" id="nav">
+        <div class="nav-container">
+            <a href="index.html" class="nav-logo">
+                <span class="logo-mark">MM</span>
+            </a>
+            <div class="nav-menu">
+                <a href="index.html" class="nav-link active">Start</a>
+                <a href="manifest.html" class="nav-link">Manifest</a>
+                <a href="methode.html" class="nav-link">Methode</a>
+                <a href="blog.html" class="nav-link">Denken</a>
+                <a href="#audit" class="nav-cta">Audit anfragen</a>
+            </div>
+            <button class="nav-toggle" id="navToggle" aria-label="Menü öffnen">
+                <span></span>
+                <span></span>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Mobile Menu -->
+    <div class="nav-mobile" id="navMobile">
+        <a href="index.html" class="nav-mobile-link active">Start</a>
+        <a href="manifest.html" class="nav-mobile-link">Manifest</a>
+        <a href="methode.html" class="nav-mobile-link">Methode</a>
+        <a href="blog.html" class="nav-mobile-link">Denken</a>
+        <a href="#audit" class="nav-mobile-cta">Audit anfragen</a>
+    </div>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="hero-bg">
+            <div class="hero-shape hero-shape-1"></div>
+            <div class="hero-shape hero-shape-2"></div>
+            <div class="hero-grid"></div>
+        </div>
+        <div class="container">
+            <div class="hero-content">
+                <h1 class="hero-headline">
+                    Wenn Sie Ihr Unternehmen<br>
+                    nicht erklären können,<br>
+                    <span class="hero-headline-alt">haben Sie kein Marketingproblem.</span>
+                </h1>
+                <p class="hero-subline">Sie haben ein Markenproblem.</p>
+                <a href="manifest.html" class="btn btn-primary">
+                    <span>Warum das so ist</span>
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Symptoms Section -->
+    <section class="section section-alt">
+        <div class="container">
+            <div class="section-header">
+                <p class="section-label">Die Symptome</p>
+                <h2 class="section-title">Drei Anzeichen, dass Ihr Unternehmen<br>sprachlich handlungsunfähig ist.</h2>
+            </div>
+            
+            <div class="symptoms-grid">
+                <article class="symptom-card">
+                    <span class="symptom-number">[01]</span>
+                    <h3 class="symptom-title">Jeder erklärt das Unternehmen anders.</h3>
+                    <p class="symptom-text">Vertrieb sagt etwas anderes als Marketing. Die Website erzählt eine dritte Geschichte.</p>
+                </article>
+                
+                <article class="symptom-card">
+                    <span class="symptom-number">[02]</span>
+                    <h3 class="symptom-title">Kommunikation hängt an Personen.</h3>
+                    <p class="symptom-text">Wenn der Marketingchef geht, geht das Markenwissen mit. Wenn die Agentur wechselt, fängt alles von vorn an.</p>
+                </article>
+                
+                <article class="symptom-card">
+                    <span class="symptom-number">[03]</span>
+                    <h3 class="symptom-title">Mehr Content, weniger Wirkung.</h3>
+                    <p class="symptom-text">KI produziert schneller, aber nicht klarer. Die Menge steigt, die Erkennbarkeit sinkt.</p>
+                </article>
+            </div>
+        </div>
+    </section>
+
+    <!-- Quote Section -->
+    <section class="section section-quote">
+        <div class="container">
+            <blockquote class="quote-block">
+                <p class="quote-text">„Marke ist kein Gefühl.<br>Marke ist ein Regelwerk."</p>
+            </blockquote>
+        </div>
+    </section>
+
+    <!-- Problem Section -->
+    <section class="section">
+        <div class="container">
+            <div class="content-split">
+                <div class="content-main">
+                    <h2 class="content-title">Das Problem ist nicht Kreativität.</h2>
+                    <p class="content-text">Das Problem ist fehlende Struktur.</p>
+                    <p class="content-text content-text-secondary">Marketing, Werbung und KI verschärfen dieses Problem, weil sie Ausdruck verlangen, bevor Klarheit existiert.</p>
+                    <a href="manifest.html" class="btn btn-secondary">
+                        <span>Das Manifest lesen</span>
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                            <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </a>
+                </div>
+                <div class="content-aside">
+                    <div class="aside-decoration"></div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- What Is Section -->
+    <section class="section section-alt">
+        <div class="container">
+            <div class="intro-block">
+                <p class="section-label">Was ist „Marke macht."</p>
+                <h2 class="intro-headline">Ein Denkrahmen für<br>unternehmerische Klarheit.</h2>
+                <div class="intro-content">
+                    <p>„Marke macht." ist keine Agentur.<br>Kein Content-Studio. Kein KI-Tool.</p>
+                    <p>Sondern eine Methode, die Unternehmen befähigt, sich selbst eindeutig zu erklären – konsistent, dokumentiert, unabhängig von Personen.</p>
+                </div>
+                <a href="methode.html" class="btn btn-primary">
+                    <span>Die Methode verstehen</span>
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="section section-cta" id="audit">
+        <div class="container">
+            <div class="cta-block">
+                <h2 class="cta-headline">Bereit für Klarheit?</h2>
+                <p class="cta-text">Das Marken-Klarheits-Audit zeigt in 7–10 Tagen, wo Ihr Unternehmen sprachlich steht – und was die nächsten Schritte sind.</p>
+                <a href="mailto:info@markemacht.de?subject=Marken-Klarheits-Audit" class="btn btn-primary btn-large">
+                    <span>Audit anfragen</span>
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-inner">
+                <div class="footer-brand">
+                    <span class="logo-mark">MM</span>
+                    <p class="footer-tagline">Marke macht.<br>Weil Klarheit Macht ist.</p>
+                </div>
+                <div class="footer-links">
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Navigation</h4>
+                        <a href="index.html">Start</a>
+                        <a href="manifest.html">Manifest</a>
+                        <a href="methode.html">Methode</a>
+                        <a href="blog.html">Denken</a>
+                    </div>
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Rechtliches</h4>
+                        <a href="#impressum">Impressum</a>
+                        <a href="#datenschutz">Datenschutz</a>
+                    </div>
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Kontakt</h4>
+                        <a href="mailto:info@markemacht.de">info@markemacht.de</a>
+                        <a href="https://adametz.media" target="_blank">adametz.media</a>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© 2025 Marke macht. – Eine Methode von <a href="https://adametz.media" target="_blank">Kevin Adametz</a></p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="main.js"></script>
+</body>
+</html>

_markemacht.de/dev/first design/main.js

@@ -0,0 +1,94 @@
+// ============================================
+// MARKE MACHT. – JavaScript
+// ============================================
+
+// --- Navigation Scroll Effect ---
+const nav = document.getElementById('nav');
+
+const handleNavScroll = () => {
+    if (window.scrollY > 50) {
+        nav.classList.add('scrolled');
+    } else {
+        nav.classList.remove('scrolled');
+    }
+};
+
+window.addEventListener('scroll', handleNavScroll);
+window.addEventListener('load', handleNavScroll);
+
+// --- Mobile Menu Toggle ---
+const navToggle = document.getElementById('navToggle');
+const navMobile = document.getElementById('navMobile');
+
+if (navToggle && navMobile) {
+    navToggle.addEventListener('click', () => {
+        navMobile.classList.toggle('active');
+        document.body.style.overflow = navMobile.classList.contains('active') ? 'hidden' : '';
+    });
+
+    // Close mobile menu on link click
+    const mobileLinks = navMobile.querySelectorAll('a');
+    mobileLinks.forEach(link => {
+        link.addEventListener('click', () => {
+            navMobile.classList.remove('active');
+            document.body.style.overflow = '';
+        });
+    });
+}
+
+// --- Smooth Scroll for Anchor Links ---
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+        const href = this.getAttribute('href');
+        if (href === '#') return;
+        
+        e.preventDefault();
+        const target = document.querySelector(href);
+        if (target) {
+            const navHeight = nav.offsetHeight;
+            const targetPosition = target.getBoundingClientRect().top + window.scrollY - navHeight - 20;
+            
+            window.scrollTo({
+                top: targetPosition,
+                behavior: 'smooth'
+            });
+        }
+    });
+});
+
+// --- Intersection Observer for Animations ---
+const observerOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px'
+};
+
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+            observer.unobserve(entry.target);
+        }
+    });
+}, observerOptions);
+
+// Observe elements with animation classes
+document.querySelectorAll('.symptom-card, .quote-block, .intro-block, .cta-block').forEach(el => {
+    observer.observe(el);
+});
+
+// --- Active Navigation Link ---
+const setActiveNavLink = () => {
+    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
+    const navLinks = document.querySelectorAll('.nav-link, .nav-mobile-link');
+    
+    navLinks.forEach(link => {
+        const href = link.getAttribute('href');
+        if (href === currentPage || (currentPage === '' && href === 'index.html')) {
+            link.classList.add('active');
+        } else {
+            link.classList.remove('active');
+        }
+    });
+};
+
+window.addEventListener('load', setActiveNavLink);

_markemacht.de/dev/first design/manifest.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Manifest – Warum Marke kein Marketingthema ist | Marke macht.</title>
+    <meta name="description" content="Der deutsche Mittelstand leidet nicht an schlechten Produkten. Er leidet an einem strukturellen Defizit: Unternehmen sind wirtschaftlich leistungsfähig, aber sprachlich handlungsunfähig.">
+    
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="pages.css">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="nav" id="nav">
+        <div class="nav-container">
+            <a href="index.html" class="nav-logo">
+                <span class="logo-mark">MM</span>
+            </a>
+            <div class="nav-menu">
+                <a href="index.html" class="nav-link">Start</a>
+                <a href="manifest.html" class="nav-link active">Manifest</a>
+                <a href="methode.html" class="nav-link">Methode</a>
+                <a href="blog.html" class="nav-link">Denken</a>
+                <a href="#audit" class="nav-cta">Audit anfragen</a>
+            </div>
+            <button class="nav-toggle" id="navToggle" aria-label="Menü öffnen">
+                <span></span>
+                <span></span>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Mobile Menu -->
+    <div class="nav-mobile" id="navMobile">
+        <a href="index.html" class="nav-mobile-link">Start</a>
+        <a href="manifest.html" class="nav-mobile-link active">Manifest</a>
+        <a href="methode.html" class="nav-mobile-link">Methode</a>
+        <a href="blog.html" class="nav-mobile-link">Denken</a>
+        <a href="#audit" class="nav-mobile-cta">Audit anfragen</a>
+    </div>
+
+    <!-- Page Hero -->
+    <section class="page-hero">
+        <div class="container">
+            <div class="page-hero-content">
+                <p class="page-label">Das Manifest</p>
+                <h1 class="page-title">Warum Marke kein<br>Marketingthema ist.</h1>
+            </div>
+        </div>
+    </section>
+
+    <!-- Intro Section -->
+    <section class="section">
+        <div class="container">
+            <div class="prose">
+                <p class="prose-lead">Der deutsche Mittelstand leidet nicht an schlechten Produkten. Nicht an fehlender Qualität. Nicht an mangelndem Know-how.</p>
+                <p class="prose-lead">Er leidet an einem strukturellen Defizit: Unternehmen sind wirtschaftlich leistungsfähig, aber sprachlich handlungsunfähig.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Diagnosis Section -->
+    <section class="section section-alt">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Was das konkret bedeutet.</h2>
+            </div>
+            
+            <div class="diagnosis-grid">
+                <article class="diagnosis-item">
+                    <span class="diagnosis-number">[01]</span>
+                    <h3 class="diagnosis-title">Keine Erklärbarkeit</h3>
+                    <p class="diagnosis-text">Die meisten Unternehmen können nicht klar sagen, wofür sie stehen. Nicht weil sie es nicht wissen. Sondern weil es nirgendwo festgelegt ist.</p>
+                </article>
+                
+                <article class="diagnosis-item">
+                    <span class="diagnosis-number">[02]</span>
+                    <h3 class="diagnosis-title">Keine Konsistenz</h3>
+                    <p class="diagnosis-text">Jede Abteilung, jeder Mitarbeiter, jede Agentur erzählt eine leicht andere Version. Das ist kein Abstimmungsproblem. Das ist ein Strukturproblem.</p>
+                </article>
+                
+                <article class="diagnosis-item">
+                    <span class="diagnosis-number">[03]</span>
+                    <h3 class="diagnosis-title">Keine Unabhängigkeit</h3>
+                    <p class="diagnosis-text">Markenwissen existiert in Köpfen. Nicht in Systemen. Wenn Menschen gehen, geht das Wissen mit.</p>
+                </article>
+                
+                <article class="diagnosis-item">
+                    <span class="diagnosis-number">[04]</span>
+                    <h3 class="diagnosis-title">Keine Vererbbarkeit</h3>
+                    <p class="diagnosis-text">Neue Mitarbeiter lernen durch Osmose. Neue Agenturen fangen bei null an. Nichts ist dokumentiert. Nichts ist übertragbar.</p>
+                </article>
+            </div>
+        </div>
+    </section>
+
+    <!-- Consequence Section -->
+    <section class="section">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Wohin das führt.</h2>
+            </div>
+            
+            <div class="consequence-block">
+                <p class="consequence-chain">
+                    <span>Ohne sprachliche Klarheit keine Identität.</span>
+                    <span>Ohne Identität keine Marke.</span>
+                    <span>Ohne Marke nur Vergleichbarkeit.</span>
+                </p>
+                <p class="consequence-conclusion">Vergleichbarkeit führt immer zum Preis.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- AI Section -->
+    <section class="section section-alt">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Warum KI das Problem verschärft.</h2>
+            </div>
+            
+            <div class="prose">
+                <p>KI kann Inhalte produzieren. Schneller als je zuvor.</p>
+                <p>Aber KI kann keine Klarheit erzeugen. Sie kann nur verstärken, was bereits existiert.</p>
+                <p class="prose-highlight">Wer unklar ist, wird durch KI schneller unklar – und in größerer Menge.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Thesis Section -->
+    <section class="section section-quote">
+        <div class="container">
+            <blockquote class="quote-block quote-block-large">
+                <p class="quote-text">„Marke ist nicht Design.<br>Marke ist nicht Marketing.</p>
+                <p class="quote-text quote-text-accent">Marke ist die Fähigkeit eines Unternehmens, sich selbst eindeutig zu erklären."</p>
+            </blockquote>
+        </div>
+    </section>
+
+    <!-- Solution Section -->
+    <section class="section">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Wenn Marke ein Strukturproblem ist,<br>braucht sie eine strukturelle Lösung.</h2>
+            </div>
+            
+            <div class="solution-grid">
+                <div class="solution-not">
+                    <h3 class="solution-subtitle">Nicht:</h3>
+                    <ul class="solution-list">
+                        <li>ein neues Logo</li>
+                        <li>eine neue Website</li>
+                        <li>mehr Content</li>
+                    </ul>
+                </div>
+                <div class="solution-but">
+                    <h3 class="solution-subtitle">Sondern:</h3>
+                    <p class="solution-answer">Ein System aus Regeln, Entscheidungen und Grenzen, das dauerhaft handlungsfähig macht.</p>
+                </div>
+            </div>
+            
+            <div class="solution-cta">
+                <a href="methode.html" class="btn btn-primary">
+                    <span>Die Methode verstehen</span>
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="section section-cta" id="audit">
+        <div class="container">
+            <div class="cta-block">
+                <h2 class="cta-headline">Bereit für Klarheit?</h2>
+                <p class="cta-text">Das Marken-Klarheits-Audit zeigt in 7–10 Tagen, wo Ihr Unternehmen sprachlich steht – und was die nächsten Schritte sind.</p>
+                <a href="mailto:info@markemacht.de?subject=Marken-Klarheits-Audit" class="btn btn-primary btn-large">
+                    <span>Audit anfragen</span>
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-inner">
+                <div class="footer-brand">
+                    <span class="logo-mark">MM</span>
+                    <p class="footer-tagline">Marke macht.<br>Weil Klarheit Macht ist.</p>
+                </div>
+                <div class="footer-links">
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Navigation</h4>
+                        <a href="index.html">Start</a>
+                        <a href="manifest.html">Manifest</a>
+                        <a href="methode.html">Methode</a>
+                        <a href="blog.html">Denken</a>
+                    </div>
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Rechtliches</h4>
+                        <a href="#impressum">Impressum</a>
+                        <a href="#datenschutz">Datenschutz</a>
+                    </div>
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Kontakt</h4>
+                        <a href="mailto:info@markemacht.de">info@markemacht.de</a>
+                        <a href="https://adametz.media" target="_blank">adametz.media</a>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© 2025 Marke macht. – Eine Methode von <a href="https://adametz.media" target="_blank">Kevin Adametz</a></p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="main.js"></script>
+</body>
+</html>

_markemacht.de/dev/first design/methode.html

@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Methode – Brand Engineering | Marke macht.</title>
+    <meta name="description" content="Brand Engineering: Ein ingenieurhaftes Verständnis von Marke. Marke wird nicht entwickelt – sie wird gebaut. Marke wird nicht gefühlt – sie wird dokumentiert.">
+    
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="pages.css">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="nav" id="nav">
+        <div class="nav-container">
+            <a href="index.html" class="nav-logo">
+                <span class="logo-mark">MM</span>
+            </a>
+            <div class="nav-menu">
+                <a href="index.html" class="nav-link">Start</a>
+                <a href="manifest.html" class="nav-link">Manifest</a>
+                <a href="methode.html" class="nav-link active">Methode</a>
+                <a href="blog.html" class="nav-link">Denken</a>
+                <a href="#audit" class="nav-cta">Audit anfragen</a>
+            </div>
+            <button class="nav-toggle" id="navToggle" aria-label="Menü öffnen">
+                <span></span>
+                <span></span>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Mobile Menu -->
+    <div class="nav-mobile" id="navMobile">
+        <a href="index.html" class="nav-mobile-link">Start</a>
+        <a href="manifest.html" class="nav-mobile-link">Manifest</a>
+        <a href="methode.html" class="nav-mobile-link active">Methode</a>
+        <a href="blog.html" class="nav-mobile-link">Denken</a>
+        <a href="#audit" class="nav-mobile-cta">Audit anfragen</a>
+    </div>
+
+    <!-- Page Hero -->
+    <section class="page-hero">
+        <div class="container">
+            <div class="page-hero-content">
+                <p class="page-label">Die Methode</p>
+                <h1 class="page-title">Brand Engineering.</h1>
+            </div>
+        </div>
+    </section>
+
+    <!-- Intro Section -->
+    <section class="section">
+        <div class="container">
+            <div class="method-intro">
+                <p class="method-intro-lead">Ein ingenieurhaftes Verständnis von Marke.</p>
+                <div class="method-intro-grid">
+                    <div class="method-intro-item">
+                        <p class="method-contrast">Marke wird nicht „entwickelt".</p>
+                        <p class="method-statement">Marke wird gebaut.</p>
+                    </div>
+                    <div class="method-intro-item">
+                        <p class="method-contrast">Marke wird nicht „gefühlt".</p>
+                        <p class="method-statement">Marke wird dokumentiert.</p>
+                    </div>
+                    <div class="method-intro-item">
+                        <p class="method-contrast">Marke wird nicht präsentiert.</p>
+                        <p class="method-statement">Marke wird nutzbar gemacht.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- DNA Section -->
+    <section class="section section-alt">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Die Marken-DNA.</h2>
+            </div>
+            
+            <div class="prose">
+                <p>Jede Marke braucht ein operatives Regelwerk. Kein Leitbild. Kein Manifest. Keine Powerpoint.</p>
+                <p>Sondern eine dokumentierte Struktur, die festlegt:</p>
+            </div>
+            
+            <ul class="dna-preview">
+                <li>Wer wir sind (jenseits von Produkten)</li>
+                <li>Warum wir, nicht die anderen</li>
+                <li>Wie wir sprechen, wie niemals</li>
+                <li>Worüber wir reden, worüber nicht</li>
+                <li>Was wir niemals tun</li>
+            </ul>
+        </div>
+    </section>
+
+    <!-- Building Blocks Section -->
+    <section class="section">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Woraus eine Marken-DNA besteht.</h2>
+            </div>
+            
+            <div class="blocks-grid">
+                <article class="block-card">
+                    <span class="block-number">[01]</span>
+                    <h3 class="block-title">Identitätskern</h3>
+                    <p class="block-question">Wer sind wir – jenseits von Produkten?</p>
+                    <p class="block-text">Das Selbstverständnis, die Haltung, die Motivation. Ohne Marktbegriffe. Ohne Kundenargumente.</p>
+                </article>
+                
+                <article class="block-card">
+                    <span class="block-number">[02]</span>
+                    <h3 class="block-title">Positionierungslogik</h3>
+                    <p class="block-question">Warum wir – und nicht die anderen?</p>
+                    <p class="block-text">Nicht was wir besser machen, sondern nach welcher Logik wir anders sind.</p>
+                </article>
+                
+                <article class="block-card">
+                    <span class="block-number">[03]</span>
+                    <h3 class="block-title">Sprach- und Tonalitätsregeln</h3>
+                    <p class="block-question">Wie sprechen wir – und wie niemals?</p>
+                    <p class="block-text">Explizite Regeln für Sprache, Ton und Argumentation. Was erlaubt ist. Was verboten ist.</p>
+                </article>
+                
+                <article class="block-card">
+                    <span class="block-number">[04]</span>
+                    <h3 class="block-title">Themen- und Relevanzrahmen</h3>
+                    <p class="block-question">Worüber sprechen wir – und worüber bewusst nicht?</p>
+                    <p class="block-text">Ein klarer Themenkorridor. Fokus statt Beliebigkeit.</p>
+                </article>
+                
+                <article class="block-card">
+                    <span class="block-number">[05]</span>
+                    <h3 class="block-title">Entscheidungs- und Grenzregeln</h3>
+                    <p class="block-question">Was darf diese Marke niemals tun?</p>
+                    <p class="block-text">Explizite Grenzen für Verhalten, Aussagen, Auftritte. Grenzen sind wichtiger als Botschaften.</p>
+                </article>
+            </div>
+        </div>
+    </section>
+
+    <!-- Quote Section -->
+    <section class="section section-quote">
+        <div class="container">
+            <blockquote class="quote-block">
+                <p class="quote-text">„Eine Marke, die nicht strukturiert existiert,<br>kann nicht geführt werden."</p>
+            </blockquote>
+        </div>
+    </section>
+
+    <!-- Benefits Section -->
+    <section class="section section-alt">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Wenn die Marken-DNA existiert.</h2>
+            </div>
+            
+            <ul class="benefits-list">
+                <li>Teams können selbstständig markengerecht arbeiten</li>
+                <li>Neue Mitarbeiter sind in Tagen sprachfähig, nicht Wochen</li>
+                <li>Agenturen haben einen klaren Rahmen</li>
+                <li>KI arbeitet regelbasiert, nicht generisch</li>
+                <li>Kommunikation wird reproduzierbar und kontrollierbar</li>
+            </ul>
+        </div>
+    </section>
+
+    <!-- Not Section -->
+    <section class="section">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Klare Abgrenzung.</h2>
+            </div>
+            
+            <div class="not-block">
+                <p class="not-intro">Brand Engineering ist nicht:</p>
+                <ul class="not-list">
+                    <li>ein Kreativworkshop</li>
+                    <li>ein Leitbildprozess</li>
+                    <li>ein Agentur-Briefing</li>
+                    <li>ein Marketing-Meeting</li>
+                </ul>
+                <p class="not-conclusion">Es ist ein unternehmerischer Klärungsprozess.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Next Step Section -->
+    <section class="section section-alt">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Wie Klarheit entsteht.</h2>
+            </div>
+            
+            <div class="audit-block">
+                <p class="audit-intro">Das Marken-Klarheits-Audit ist der Einstieg.</p>
+                <p class="audit-time">In 7–10 Tagen entsteht:</p>
+                <ul class="audit-list">
+                    <li>Eine Analyse des Ist-Zustands</li>
+                    <li>Die vollständige Marken-DNA v1.0</li>
+                    <li>Eine Validierung an realen Inhalten</li>
+                    <li>Eine klare Handlungsempfehlung</li>
+                </ul>
+            </div>
+        </div>
+    </section>
+
+    <!-- Source Section -->
+    <section class="section">
+        <div class="container">
+            <div class="source-block">
+                <p class="source-text">„Marke macht." wurde entwickelt von <strong>Kevin Adametz</strong> – Markenarchitekt und Gründer von ADAMETZ.MEDIA.</p>
+                <p class="source-text source-text-secondary">Seit über 20 Jahren arbeitet er mit Unternehmen an der Frage, wie sie sich erklären.</p>
+                <a href="https://adametz.media" target="_blank" class="btn btn-secondary">
+                    <span>Mehr über Kevin Adametz</span>
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="section section-cta" id="audit">
+        <div class="container">
+            <div class="cta-block">
+                <h2 class="cta-headline">Bereit für Klarheit?</h2>
+                <p class="cta-text">Das Marken-Klarheits-Audit zeigt in 7–10 Tagen, wo Ihr Unternehmen sprachlich steht – und was die nächsten Schritte sind.</p>
+                <a href="mailto:info@markemacht.de?subject=Marken-Klarheits-Audit" class="btn btn-primary btn-large">
+                    <span>Audit anfragen</span>
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <path d="M3 8H13M13 8L8 3M13 8L8 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-inner">
+                <div class="footer-brand">
+                    <span class="logo-mark">MM</span>
+                    <p class="footer-tagline">Marke macht.<br>Weil Klarheit Macht ist.</p>
+                </div>
+                <div class="footer-links">
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Navigation</h4>
+                        <a href="index.html">Start</a>
+                        <a href="manifest.html">Manifest</a>
+                        <a href="methode.html">Methode</a>
+                        <a href="blog.html">Denken</a>
+                    </div>
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Rechtliches</h4>
+                        <a href="#impressum">Impressum</a>
+                        <a href="#datenschutz">Datenschutz</a>
+                    </div>
+                    <div class="footer-col">
+                        <h4 class="footer-col-title">Kontakt</h4>
+                        <a href="mailto:info@markemacht.de">info@markemacht.de</a>
+                        <a href="https://adametz.media" target="_blank">adametz.media</a>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>© 2025 Marke macht. – Eine Methode von <a href="https://adametz.media" target="_blank">Kevin Adametz</a></p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="main.js"></script>
+</body>
+</html>

_markemacht.de/dev/first design/pages.css

@@ -0,0 +1,680 @@
+/* ============================================
+   MARKE MACHT. – Pages CSS
+   Additional styles for subpages
+   ============================================ */
+
+/* --- Page Hero --- */
+.page-hero {
+    padding: 180px 0 var(--space-3xl);
+    background: var(--color-bg);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.page-hero-content {
+    max-width: 800px;
+}
+
+.page-label {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--color-accent);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: var(--space-md);
+}
+
+.page-title {
+    font-size: clamp(2.5rem, 5vw, 4rem);
+    font-weight: 600;
+    line-height: 1.1;
+    letter-spacing: -0.03em;
+    margin-bottom: var(--space-lg);
+}
+
+.page-intro {
+    font-size: 1.25rem;
+    color: var(--color-text-secondary);
+    max-width: 600px;
+}
+
+/* --- Prose --- */
+.prose {
+    max-width: 700px;
+}
+
+.prose p {
+    font-size: 1.125rem;
+    line-height: 1.8;
+    color: var(--color-text-secondary);
+    margin-bottom: var(--space-md);
+}
+
+.prose-lead {
+    font-size: 1.375rem !important;
+    color: var(--color-text) !important;
+    line-height: 1.6;
+}
+
+.prose-highlight {
+    font-size: 1.25rem !important;
+    color: var(--color-text) !important;
+    font-weight: 500;
+}
+
+.prose h2 {
+    font-size: 1.5rem;
+    color: var(--color-text);
+    margin-top: var(--space-2xl);
+    margin-bottom: var(--space-md);
+}
+
+/* --- Diagnosis Grid (Manifest) --- */
+.diagnosis-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-lg);
+    margin-top: var(--space-xl);
+}
+
+.diagnosis-item {
+    padding: var(--space-xl);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+}
+
+.diagnosis-number {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--color-accent);
+    display: block;
+    margin-bottom: var(--space-sm);
+}
+
+.diagnosis-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: var(--space-sm);
+    color: var(--color-text);
+}
+
+.diagnosis-text {
+    font-size: 1rem;
+    color: var(--color-text-secondary);
+    line-height: 1.6;
+}
+
+/* --- Consequence Block (Manifest) --- */
+.consequence-block {
+    max-width: 600px;
+    margin-top: var(--space-xl);
+}
+
+.consequence-chain {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    margin-bottom: var(--space-lg);
+}
+
+.consequence-chain span {
+    font-size: 1.25rem;
+    color: var(--color-text-secondary);
+    padding-left: var(--space-md);
+    border-left: 2px solid var(--color-border-light);
+}
+
+.consequence-conclusion {
+    font-family: var(--font-mono);
+    font-size: 1.5rem;
+    color: var(--color-accent);
+    font-weight: 500;
+}
+
+/* --- Solution Grid (Manifest) --- */
+.solution-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-2xl);
+    margin-top: var(--space-xl);
+    margin-bottom: var(--space-2xl);
+}
+
+.solution-subtitle {
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: var(--space-md);
+}
+
+.solution-list {
+    list-style: none;
+}
+
+.solution-list li {
+    font-size: 1.125rem;
+    color: var(--color-text-secondary);
+    padding: var(--space-sm) 0;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.solution-list li::before {
+    content: '—';
+    margin-right: var(--space-sm);
+    color: var(--color-text-muted);
+}
+
+.solution-answer {
+    font-size: 1.25rem;
+    color: var(--color-text);
+    line-height: 1.6;
+}
+
+.solution-cta {
+    margin-top: var(--space-xl);
+}
+
+/* --- Quote Block Large --- */
+.quote-block-large .quote-text {
+    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
+    margin-bottom: var(--space-md);
+}
+
+.quote-text-accent {
+    color: var(--color-accent) !important;
+    font-style: normal !important;
+}
+
+/* --- Method Intro --- */
+.method-intro {
+    max-width: 900px;
+}
+
+.method-intro-lead {
+    font-size: 1.5rem;
+    color: var(--color-text);
+    margin-bottom: var(--space-2xl);
+}
+
+.method-intro-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-xl);
+}
+
+.method-intro-item {
+    padding: var(--space-lg);
+    border-left: 1px solid var(--color-border-light);
+}
+
+.method-contrast {
+    font-size: 1rem;
+    color: var(--color-text-muted);
+    margin-bottom: var(--space-xs);
+    text-decoration: line-through;
+    text-decoration-color: var(--color-text-muted);
+}
+
+.method-statement {
+    font-size: 1.25rem;
+    color: var(--color-text);
+    font-weight: 500;
+}
+
+/* --- DNA Preview --- */
+.dna-preview {
+    list-style: none;
+    margin-top: var(--space-xl);
+    max-width: 500px;
+}
+
+.dna-preview li {
+    font-size: 1.125rem;
+    color: var(--color-text);
+    padding: var(--space-sm) 0;
+    padding-left: var(--space-lg);
+    border-left: 2px solid var(--color-accent);
+    margin-bottom: var(--space-sm);
+}
+
+/* --- Building Blocks Grid --- */
+.blocks-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-lg);
+    margin-top: var(--space-xl);
+}
+
+.block-card {
+    padding: var(--space-xl);
+    background: var(--color-bg-alt);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    transition: border-color var(--transition-base);
+}
+
+.block-card:hover {
+    border-color: var(--color-border-light);
+}
+
+.block-card:last-child {
+    grid-column: 1 / -1;
+    max-width: 50%;
+}
+
+.block-number {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--color-accent);
+    display: block;
+    margin-bottom: var(--space-sm);
+}
+
+.block-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: var(--space-sm);
+    color: var(--color-text);
+}
+
+.block-question {
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    color: var(--color-text-muted);
+    margin-bottom: var(--space-sm);
+}
+
+.block-text {
+    font-size: 1rem;
+    color: var(--color-text-secondary);
+    line-height: 1.6;
+}
+
+/* --- Benefits List --- */
+.benefits-list {
+    list-style: none;
+    max-width: 600px;
+    margin-top: var(--space-xl);
+}
+
+.benefits-list li {
+    font-size: 1.125rem;
+    color: var(--color-text);
+    padding: var(--space-md) 0;
+    border-bottom: 1px solid var(--color-border);
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+}
+
+.benefits-list li::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    background: var(--color-accent);
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+/* --- Not Block --- */
+.not-block {
+    max-width: 600px;
+    margin-top: var(--space-xl);
+}
+
+.not-intro {
+    font-size: 1.125rem;
+    color: var(--color-text-secondary);
+    margin-bottom: var(--space-md);
+}
+
+.not-list {
+    list-style: none;
+    margin-bottom: var(--space-xl);
+}
+
+.not-list li {
+    font-size: 1.125rem;
+    color: var(--color-text-muted);
+    padding: var(--space-sm) 0;
+    text-decoration: line-through;
+    text-decoration-color: var(--color-text-muted);
+}
+
+.not-conclusion {
+    font-size: 1.375rem;
+    color: var(--color-text);
+    font-weight: 500;
+}
+
+/* --- Audit Block --- */
+.audit-block {
+    max-width: 600px;
+    margin-top: var(--space-xl);
+}
+
+.audit-intro {
+    font-size: 1.25rem;
+    color: var(--color-text);
+    margin-bottom: var(--space-md);
+}
+
+.audit-time {
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    color: var(--color-accent);
+    margin-bottom: var(--space-md);
+}
+
+.audit-list {
+    list-style: none;
+}
+
+.audit-list li {
+    font-size: 1.125rem;
+    color: var(--color-text-secondary);
+    padding: var(--space-sm) 0;
+    padding-left: var(--space-lg);
+    border-left: 1px solid var(--color-border-light);
+}
+
+/* --- Source Block --- */
+.source-block {
+    max-width: 600px;
+    padding: var(--space-2xl);
+    background: var(--color-bg-alt);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+}
+
+.source-text {
+    font-size: 1.125rem;
+    color: var(--color-text);
+    margin-bottom: var(--space-md);
+}
+
+.source-text strong {
+    color: var(--color-accent);
+}
+
+.source-text-secondary {
+    color: var(--color-text-secondary) !important;
+    margin-bottom: var(--space-lg) !important;
+}
+
+/* --- Blog Filter --- */
+.section-filter {
+    padding: var(--space-lg) 0;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.filter-bar {
+    display: flex;
+    gap: var(--space-sm);
+}
+
+.filter-btn {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--color-text-secondary);
+    background: transparent;
+    border: 1px solid transparent;
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+}
+
+.filter-btn:hover {
+    color: var(--color-text);
+}
+
+.filter-btn.active {
+    color: var(--color-accent);
+    border-color: var(--color-accent);
+}
+
+/* --- Blog List --- */
+.section-blog {
+    padding-top: var(--space-2xl);
+}
+
+.blog-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+}
+
+.blog-list-compact {
+    max-width: 700px;
+}
+
+.blog-card {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    transition: border-color var(--transition-base);
+}
+
+.blog-card:hover {
+    border-color: var(--color-border-light);
+}
+
+.blog-card-inner {
+    display: block;
+    padding: var(--space-xl);
+}
+
+.blog-card-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    margin-bottom: var(--space-md);
+}
+
+.blog-card-number {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--color-accent);
+}
+
+.blog-card-category {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+.blog-card-soon {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: var(--color-bg);
+    background: var(--color-text-muted);
+    padding: 0.2rem 0.5rem;
+    border-radius: var(--radius-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.blog-card-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--color-text);
+    margin-bottom: var(--space-sm);
+    line-height: 1.3;
+}
+
+.blog-card-excerpt {
+    font-size: 1rem;
+    color: var(--color-text-secondary);
+    line-height: 1.6;
+    margin-bottom: var(--space-md);
+}
+
+.blog-card-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--color-accent);
+    transition: gap var(--transition-fast);
+}
+
+.blog-card:hover .blog-card-link {
+    gap: 0.75rem;
+}
+
+.blog-card-upcoming {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+/* --- Article --- */
+.article-header {
+    padding: 180px 0 var(--space-3xl);
+    background: var(--color-bg);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.article-back {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--color-text-secondary);
+    margin-bottom: var(--space-xl);
+    transition: color var(--transition-fast);
+}
+
+.article-back:hover {
+    color: var(--color-text);
+}
+
+.article-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    margin-bottom: var(--space-md);
+}
+
+.article-category {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--color-accent);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+.article-reading {
+    font-size: 0.9rem;
+    color: var(--color-text-muted);
+}
+
+.article-title {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 600;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+    margin-bottom: var(--space-lg);
+    max-width: 800px;
+}
+
+.article-lead {
+    font-size: 1.375rem;
+    color: var(--color-text-secondary);
+    max-width: 700px;
+    line-height: 1.5;
+}
+
+.article-content {
+    padding: var(--space-3xl) 0;
+}
+
+.container-narrow {
+    max-width: 700px;
+}
+
+.article-content .prose p {
+    margin-bottom: var(--space-lg);
+}
+
+.article-content .prose h2 {
+    font-size: 1.375rem;
+    margin-top: var(--space-3xl);
+    margin-bottom: var(--space-lg);
+}
+
+.article-highlight {
+    padding: var(--space-xl);
+    background: var(--color-bg-alt);
+    border-left: 2px solid var(--color-accent);
+    margin: var(--space-2xl) 0;
+}
+
+.article-highlight p {
+    font-size: 1.25rem !important;
+    color: var(--color-text) !important;
+    margin-bottom: 0 !important;
+    line-height: 1.5;
+}
+
+.article-footer {
+    margin-top: var(--space-3xl);
+    padding-top: var(--space-xl);
+    border-top: 1px solid var(--color-border);
+}
+
+.article-cta p {
+    font-size: 0.9rem;
+    color: var(--color-text-muted);
+    margin-bottom: var(--space-sm);
+}
+
+/* --- Responsive --- */
+@media (max-width: 1024px) {
+    .diagnosis-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .solution-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-xl);
+    }
+    
+    .method-intro-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-md);
+    }
+    
+    .blocks-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .block-card:last-child {
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    .page-hero {
+        padding: 140px 0 var(--space-2xl);
+    }
+    
+    .article-header {
+        padding: 140px 0 var(--space-2xl);
+    }
+    
+    .filter-bar {
+        flex-wrap: wrap;
+    }
+    
+    .blog-card-inner {
+        padding: var(--space-lg);
+    }
+    
+    .blog-card-title {
+        font-size: 1.25rem;
+    }
+}

_markemacht.de/dev/first design/styles.css

@@ -0,0 +1,765 @@
+/* ============================================
+   MARKE MACHT. – CSS Design System
+   ============================================ */
+
+/* --- CSS Variables --- */
+:root {
+    /* Colors */
+    --color-bg: #000000;
+    --color-bg-alt: #0A0A0A;
+    --color-bg-elevated: #111111;
+    --color-bg-card: #0D0D0D;
+    
+    --color-text: #FFFFFF;
+    --color-text-secondary: #888888;
+    --color-text-muted: #555555;
+    
+    --color-accent: #2E5BFF;
+    --color-accent-hover: #4A7AFF;
+    --color-accent-glow: rgba(46, 91, 255, 0.15);
+    
+    --color-border: #1A1A1A;
+    --color-border-light: #222222;
+    
+    /* Typography */
+    --font-headline: 'Outfit', sans-serif;
+    --font-body: 'Source Sans 3', sans-serif;
+    --font-mono: 'JetBrains Mono', monospace;
+    
+    /* Spacing */
+    --space-xs: 0.5rem;
+    --space-sm: 1rem;
+    --space-md: 1.5rem;
+    --space-lg: 2rem;
+    --space-xl: 3rem;
+    --space-2xl: 4rem;
+    --space-3xl: 6rem;
+    --space-4xl: 8rem;
+    
+    /* Container */
+    --container-max: 1200px;
+    --container-padding: 1.5rem;
+    
+    /* Transitions */
+    --transition-fast: 150ms ease;
+    --transition-base: 250ms ease;
+    --transition-slow: 400ms ease;
+    
+    /* Border Radius */
+    --radius-sm: 2px;
+    --radius-md: 4px;
+}
+
+/* --- Reset & Base --- */
+*, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    font-family: var(--font-body);
+    font-size: 18px;
+    line-height: 1.7;
+    color: var(--color-text);
+    background-color: var(--color-bg);
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+    transition: color var(--transition-fast);
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* --- Typography --- */
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-headline);
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+}
+
+h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
+h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
+h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
+
+p {
+    margin-bottom: 1em;
+}
+
+p:last-child {
+    margin-bottom: 0;
+}
+
+/* --- Layout --- */
+.container {
+    width: 100%;
+    max-width: var(--container-max);
+    margin: 0 auto;
+    padding: 0 var(--container-padding);
+}
+
+.section {
+    padding: var(--space-4xl) 0;
+}
+
+.section-alt {
+    background-color: var(--color-bg-alt);
+}
+
+/* --- Navigation --- */
+.nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    padding: var(--space-md) 0;
+    background: transparent;
+    transition: background var(--transition-base), padding var(--transition-base);
+}
+
+.nav.scrolled {
+    background: rgba(0, 0, 0, 0.95);
+    backdrop-filter: blur(10px);
+    padding: var(--space-sm) 0;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.nav-container {
+    max-width: var(--container-max);
+    margin: 0 auto;
+    padding: 0 var(--container-padding);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.nav-logo {
+    display: flex;
+    align-items: center;
+}
+
+.logo-mark {
+    font-family: var(--font-headline);
+    font-size: 1.5rem;
+    font-weight: 700;
+    letter-spacing: -0.05em;
+    color: var(--color-text);
+}
+
+.nav-menu {
+    display: flex;
+    align-items: center;
+    gap: var(--space-lg);
+}
+
+.nav-link {
+    font-family: var(--font-body);
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    transition: color var(--transition-fast);
+    position: relative;
+}
+
+.nav-link:hover,
+.nav-link.active {
+    color: var(--color-text);
+}
+
+.nav-link.active::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: var(--color-accent);
+}
+
+.nav-cta {
+    font-family: var(--font-body);
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--color-accent);
+    padding: 0.6rem 1.2rem;
+    border: 1px solid var(--color-accent);
+    border-radius: var(--radius-sm);
+    transition: all var(--transition-fast);
+}
+
+.nav-cta:hover {
+    background: var(--color-accent);
+    color: var(--color-bg);
+}
+
+.nav-toggle {
+    display: none;
+    flex-direction: column;
+    gap: 6px;
+    padding: 8px;
+    background: none;
+    border: none;
+    cursor: pointer;
+}
+
+.nav-toggle span {
+    width: 24px;
+    height: 1px;
+    background: var(--color-text);
+    transition: transform var(--transition-fast);
+}
+
+.nav-mobile {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--color-bg);
+    z-index: 999;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-lg);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--transition-base);
+}
+
+.nav-mobile.active {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.nav-mobile-link {
+    font-family: var(--font-headline);
+    font-size: 2rem;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    transition: color var(--transition-fast);
+}
+
+.nav-mobile-link:hover,
+.nav-mobile-link.active {
+    color: var(--color-text);
+}
+
+.nav-mobile-cta {
+    margin-top: var(--space-lg);
+    font-size: 1rem;
+    color: var(--color-accent);
+    padding: 0.8rem 1.5rem;
+    border: 1px solid var(--color-accent);
+}
+
+/* --- Hero Section --- */
+.hero {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    padding-top: 100px;
+}
+
+.hero-bg {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+}
+
+.hero-shape {
+    position: absolute;
+    background: var(--color-accent);
+    opacity: 0.03;
+}
+
+.hero-shape-1 {
+    width: 400px;
+    height: 600px;
+    right: 10%;
+    top: 20%;
+    transform: rotate(-12deg);
+}
+
+.hero-shape-2 {
+    width: 200px;
+    height: 300px;
+    right: 5%;
+    bottom: 10%;
+    transform: rotate(8deg);
+    opacity: 0.05;
+}
+
+.hero-grid {
+    position: absolute;
+    inset: 0;
+    background-image: 
+        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+    background-size: 60px 60px;
+    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
+}
+
+.hero-content {
+    position: relative;
+    z-index: 1;
+    max-width: 900px;
+}
+
+.hero-headline {
+    font-size: clamp(2.5rem, 5.5vw, 4.5rem);
+    font-weight: 600;
+    line-height: 1.1;
+    margin-bottom: var(--space-lg);
+    letter-spacing: -0.03em;
+}
+
+.hero-headline-alt {
+    color: var(--color-text-secondary);
+}
+
+.hero-subline {
+    font-family: var(--font-mono);
+    font-size: clamp(1.25rem, 2vw, 1.5rem);
+    color: var(--color-accent);
+    margin-bottom: var(--space-xl);
+    padding-left: 2px;
+}
+
+/* --- Buttons --- */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-family: var(--font-body);
+    font-size: 1rem;
+    font-weight: 500;
+    padding: 1rem 1.75rem;
+    border-radius: var(--radius-sm);
+    transition: all var(--transition-fast);
+    cursor: pointer;
+    border: none;
+}
+
+.btn svg {
+    transition: transform var(--transition-fast);
+}
+
+.btn:hover svg {
+    transform: translateX(4px);
+}
+
+.btn-primary {
+    background: transparent;
+    color: var(--color-accent);
+    border: 1px solid var(--color-accent);
+}
+
+.btn-primary:hover {
+    background: var(--color-accent);
+    color: var(--color-bg);
+}
+
+.btn-secondary {
+    background: transparent;
+    color: var(--color-text-secondary);
+    border: 1px solid var(--color-border-light);
+}
+
+.btn-secondary:hover {
+    color: var(--color-text);
+    border-color: var(--color-text-secondary);
+}
+
+.btn-large {
+    padding: 1.25rem 2.25rem;
+    font-size: 1.1rem;
+}
+
+/* --- Section Header --- */
+.section-header {
+    margin-bottom: var(--space-3xl);
+}
+
+.section-label {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--color-accent);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: var(--space-md);
+}
+
+.section-title {
+    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
+    color: var(--color-text);
+    max-width: 800px;
+}
+
+/* --- Symptoms Grid --- */
+.symptoms-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-lg);
+}
+
+.symptom-card {
+    padding: var(--space-xl);
+    background: var(--color-bg-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    transition: border-color var(--transition-base);
+}
+
+.symptom-card:hover {
+    border-color: var(--color-border-light);
+}
+
+.symptom-number {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--color-accent);
+    display: block;
+    margin-bottom: var(--space-md);
+}
+
+.symptom-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: var(--space-sm);
+    line-height: 1.3;
+}
+
+.symptom-text {
+    font-size: 1rem;
+    color: var(--color-text-secondary);
+    line-height: 1.6;
+}
+
+/* --- Quote Section --- */
+.section-quote {
+    padding: var(--space-4xl) 0;
+    background: var(--color-bg);
+    border-top: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.quote-block {
+    max-width: 700px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.quote-text {
+    font-family: var(--font-mono);
+    font-size: clamp(1.5rem, 3vw, 2rem);
+    font-weight: 400;
+    font-style: italic;
+    line-height: 1.5;
+    color: var(--color-text);
+}
+
+/* --- Content Split --- */
+.content-split {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-3xl);
+    align-items: center;
+}
+
+.content-main {
+    max-width: 500px;
+}
+
+.content-title {
+    font-size: clamp(1.75rem, 3vw, 2.25rem);
+    margin-bottom: var(--space-md);
+}
+
+.content-text {
+    font-size: 1.125rem;
+    color: var(--color-text);
+    margin-bottom: var(--space-sm);
+}
+
+.content-text-secondary {
+    color: var(--color-text-secondary);
+    margin-bottom: var(--space-xl);
+}
+
+.content-aside {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.aside-decoration {
+    width: 200px;
+    height: 300px;
+    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg) 100%);
+    border: 1px solid var(--color-border);
+    position: relative;
+}
+
+.aside-decoration::before {
+    content: '';
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    right: -20px;
+    bottom: -20px;
+    border: 1px solid var(--color-accent);
+    opacity: 0.3;
+}
+
+/* --- Intro Block --- */
+.intro-block {
+    max-width: 700px;
+}
+
+.intro-headline {
+    font-size: clamp(2rem, 4vw, 3rem);
+    margin-bottom: var(--space-xl);
+    line-height: 1.15;
+}
+
+.intro-content {
+    margin-bottom: var(--space-xl);
+}
+
+.intro-content p {
+    font-size: 1.125rem;
+    color: var(--color-text-secondary);
+    margin-bottom: var(--space-md);
+}
+
+.intro-content p:first-child {
+    color: var(--color-text);
+}
+
+/* --- CTA Section --- */
+.section-cta {
+    background: var(--color-bg-elevated);
+    border-top: 1px solid var(--color-border);
+}
+
+.cta-block {
+    max-width: 600px;
+    text-align: center;
+    margin: 0 auto;
+}
+
+.cta-headline {
+    font-size: clamp(2rem, 4vw, 2.5rem);
+    margin-bottom: var(--space-md);
+}
+
+.cta-text {
+    font-size: 1.125rem;
+    color: var(--color-text-secondary);
+    margin-bottom: var(--space-xl);
+}
+
+/* --- Footer --- */
+.footer {
+    padding: var(--space-3xl) 0 var(--space-xl);
+    background: var(--color-bg);
+    border-top: 1px solid var(--color-border);
+}
+
+.footer-inner {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: var(--space-3xl);
+    padding-bottom: var(--space-xl);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.footer-brand .logo-mark {
+    font-size: 2rem;
+    display: block;
+    margin-bottom: var(--space-md);
+}
+
+.footer-tagline {
+    font-size: 0.95rem;
+    color: var(--color-text-secondary);
+    line-height: 1.6;
+}
+
+.footer-links {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-xl);
+}
+
+.footer-col {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+
+.footer-col-title {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--color-text-muted);
+    margin-bottom: var(--space-xs);
+}
+
+.footer-col a {
+    font-size: 0.95rem;
+    color: var(--color-text-secondary);
+    transition: color var(--transition-fast);
+}
+
+.footer-col a:hover {
+    color: var(--color-text);
+}
+
+.footer-bottom {
+    padding-top: var(--space-xl);
+    text-align: center;
+}
+
+.footer-bottom p {
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
+}
+
+.footer-bottom a {
+    color: var(--color-text-secondary);
+}
+
+.footer-bottom a:hover {
+    color: var(--color-accent);
+}
+
+/* --- Responsive --- */
+@media (max-width: 1024px) {
+    .symptoms-grid {
+        grid-template-columns: 1fr;
+        gap: var(--space-md);
+    }
+    
+    .content-split {
+        grid-template-columns: 1fr;
+        gap: var(--space-xl);
+    }
+    
+    .content-aside {
+        display: none;
+    }
+    
+    .footer-inner {
+        grid-template-columns: 1fr;
+        gap: var(--space-xl);
+    }
+    
+    .footer-links {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    :root {
+        --container-padding: 1.25rem;
+    }
+    
+    body {
+        font-size: 16px;
+    }
+    
+    .section {
+        padding: var(--space-3xl) 0;
+    }
+    
+    .nav-menu {
+        display: none;
+    }
+    
+    .nav-toggle {
+        display: flex;
+    }
+    
+    .nav-mobile {
+        display: flex;
+    }
+    
+    .hero {
+        min-height: auto;
+        padding: 150px 0 var(--space-3xl);
+    }
+    
+    .hero-shape-1,
+    .hero-shape-2 {
+        display: none;
+    }
+    
+    .symptom-card {
+        padding: var(--space-lg);
+    }
+    
+    .footer-links {
+        grid-template-columns: 1fr;
+        gap: var(--space-lg);
+    }
+}
+
+/* --- Animations --- */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.hero-content {
+    animation: fadeInUp 0.8s ease forwards;
+}
+
+.symptom-card {
+    opacity: 0;
+    animation: fadeInUp 0.6s ease forwards;
+}
+
+.symptom-card:nth-child(1) { animation-delay: 0.1s; }
+.symptom-card:nth-child(2) { animation-delay: 0.2s; }
+.symptom-card:nth-child(3) { animation-delay: 0.3s; }
+
+/* --- Utility Classes --- */
+.text-accent { color: var(--color-accent); }
+.text-secondary { color: var(--color-text-secondary); }
+.text-muted { color: var(--color-text-muted); }
+
+.mt-sm { margin-top: var(--space-sm); }
+.mt-md { margin-top: var(--space-md); }
+.mt-lg { margin-top: var(--space-lg); }
+.mt-xl { margin-top: var(--space-xl); }
+
+.mb-sm { margin-bottom: var(--space-sm); }
+.mb-md { margin-bottom: var(--space-md); }
+.mb-lg { margin-bottom: var(--space-lg); }
+.mb-xl { margin-bottom: var(--space-xl); }

_markemacht.de/index.html

@@ -0,0 +1,288 @@
+<!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>MARKE MACHT · Denkraum für Unternehmer</title>
+  <meta name="description" content="Wenn Sie Ihr Unternehmen nicht erklären können, haben Sie kein Marketingproblem. Sie haben ein Markenproblem. Denkraum für Unternehmer im Mittelstand." />
+
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="MARKE MACHT" />
+  <meta property="og:title" content="MARKE MACHT · Denkraum für Unternehmer" />
+  <meta property="og:description" content="Marke ist die Fähigkeit eines Unternehmens, sich selbst eindeutig zu erklären." />
+  <meta property="og:url" content="https://markemacht.de/" />
+  <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/" />
+
+  <script>
+    (function () {
+      try {
+        var v = localStorage.getItem('mm-wirkung');
+        if (v !== 'monolith' && v !== 'editorial') v = 'monolith';
+        document.documentElement.setAttribute('data-theme', v);
+      } catch (_) {}
+    })();
+  </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>
+
+  <a class="visually-hidden" href="#main" style="position:absolute;left:-9999px;">Zum Inhalt springen</a>
+
+  <!-- Navigation -->
+  <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 is-active" 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" 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="#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>
+
+  <!-- Mobile Drawer -->
+  <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 is-active" 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" 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="#audit">
+        Audit anfragen
+        <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
+      </a>
+    </div>
+  </aside>
+
+  <main id="main">
+
+    <!-- Hero -->
+    <header class="hero">
+      <div class="hero-keyvisual" aria-hidden="true">
+        <div class="monolith"></div>
+      </div>
+
+      <div class="shell hero-grid grid-12">
+        <div class="col-12" data-reveal>
+          <div class="stack-32">
+            <span class="meta">[00] Denkraum · markemacht.de</span>
+            <h1 class="hero-headline" style="max-width: 16ch;">
+              Wenn Sie Ihr Unternehmen nicht erklären können, haben Sie kein <span class="accent">Marketingproblem</span>.
+            </h1>
+            <p class="editorial dim" style="max-width: 28ch;">
+              Sie haben ein Markenproblem.
+            </p>
+            <div class="btn-row">
+              <a class="btn" href="#symptome">
+                Warum das so ist
+                <span class="material-symbols-outlined" aria-hidden="true">south</span>
+              </a>
+              <a class="btn btn-ghost only-editorial" href="./manifest.html">
+                Manifest lesen
+                <span class="material-symbols-outlined" aria-hidden="true">east</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Symptome -->
+    <section class="section" id="symptome" style="background: rgb(var(--color-bg-surface));">
+      <div class="shell grid-12">
+        <div class="col-12 stack-48" data-reveal>
+          <div class="stack-16">
+            <span class="meta">[01] Diagnose</span>
+            <h2 class="section-headline" style="max-width: 20ch;">
+              Drei Anzeichen, dass Ihr Unternehmen sprachlich handlungsunfähig ist.
+            </h2>
+          </div>
+
+          <!-- Monolithisch: asymmetrische Offsets -->
+          <div class="symptoms-mono">
+            <div class="sym-row" data-reveal>
+              <div class="col-12 md:col-3">
+                <span class="meta accent">Symptom Eins</span>
+              </div>
+              <div class="card col-12 md:col-9">
+                <h3 class="editorial" style="margin-bottom: 16px; color: rgb(var(--color-text-primary));">Jeder erklärt anders.</h3>
+                <p class="body-text" style="max-width: 50ch;">
+                  Wenn drei Geschäftsführer drei unterschiedliche Antworten auf die Frage nach dem Kernangebot geben, fehlt das strategische Fundament. Die Folge: Verzettelung im Vertrieb.
+                </p>
+              </div>
+            </div>
+
+            <div class="sym-row" data-reveal>
+              <div class="col-12 md:col-3" aria-hidden="true"></div>
+              <div class="col-12 md:col-3">
+                <span class="meta accent">Symptom Zwei</span>
+              </div>
+              <div class="card col-12 md:col-6">
+                <h3 class="editorial" style="margin-bottom: 16px; color: rgb(var(--color-text-primary));">Kommunikation hängt an Personen.</h3>
+                <p class="body-text" style="max-width: 58ch;">
+                  Das Wissen über den Wert des Unternehmens existiert nur in den Köpfen weniger Experten. Es gibt kein dokumentiertes Regelwerk für neue Mitarbeiter oder Agenturen.
+                </p>
+              </div>
+            </div>
+
+            <div class="sym-row" data-reveal>
+              <div class="col-12 md:col-3">
+                <span class="meta accent">Symptom Drei</span>
+              </div>
+              <div class="card card-accent-border col-12 md:col-8">
+                <h3 class="editorial" style="margin-bottom: 16px; color: rgb(var(--color-text-primary));">Mehr Content, weniger Wirkung.</h3>
+                <p class="body-text" style="max-width: 58ch;">
+                  Marketing produziert blindlings Material, das keine Haltung vermittelt. Die Lautstärke wird erhöht, weil die Substanz fehlt.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Editorial: Bento -->
+          <div class="symptoms-editorial">
+            <article class="card" data-reveal>
+              <span class="tag">Symptom 01</span>
+              <h3 class="sub-headline" style="margin-top: 16px; margin-bottom: 12px;">Jeder erklärt anders.</h3>
+              <p class="body-text">
+                Wenn drei Geschäftsführer drei unterschiedliche Antworten auf die Frage nach dem Kernangebot geben, fehlt das strategische Fundament. Die Folge: Verzettelung im Vertrieb.
+              </p>
+            </article>
+            <article class="card" data-reveal data-reveal-delay="80">
+              <span class="tag">Symptom 02</span>
+              <h3 class="sub-headline" style="margin-top: 16px; margin-bottom: 12px;">Kommunikation hängt an Personen.</h3>
+              <p class="body-text">
+                Das Wissen über den Wert des Unternehmens existiert nur in den Köpfen weniger Experten. Es gibt kein dokumentiertes Regelwerk für neue Mitarbeiter oder Agenturen.
+              </p>
+            </article>
+            <article class="card card-accent-border" data-reveal data-reveal-delay="160">
+              <span class="tag">Symptom 03</span>
+              <h3 class="sub-headline" style="margin-top: 16px; margin-bottom: 12px;">Mehr Content, weniger Wirkung.</h3>
+              <p class="body-text">
+                Marketing produziert blindlings Material, das keine Haltung vermittelt. Die Lautstärke wird erhöht, weil die Substanz fehlt.
+              </p>
+            </article>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Quote -->
+    <section class="quote-block" data-reveal>
+      <div class="shell">
+        <div class="quote-wrap">
+          <span class="quote-mark" aria-hidden="true">“</span>
+          <blockquote class="quote">
+            Marke ist kein Gefühl.<br />
+            <span class="quote-dim">Marke ist ein Regelwerk.</span>
+          </blockquote>
+        </div>
+      </div>
+    </section>
+
+    <!-- Kernthese -->
+    <section class="section" style="background: rgb(var(--color-bg-surface));">
+      <div class="shell grid-12">
+        <div class="col-12" data-reveal>
+          <span class="meta">[02] Kernthese</span>
+        </div>
+        <div class="col-12 stack-32" data-reveal>
+          <h2 class="section-headline" style="max-width: 18ch;">
+            Textklarheit erzwingt Denkklarheit.
+          </h2>
+          <div class="stack-24 max-prose">
+            <p class="body-text">
+              Die meisten Markenprojekte scheitern, weil sie mit Farben und Logos beginnen. Sie verwechseln Dekoration mit Identität. Wir drehen den Prozess um.
+            </p>
+            <p class="body-text">
+              Bevor etwas gestaltet wird, muss es präzise formuliert sein. Ein Monolith aus Sprache, der nicht wackelt, wenn der Wind der Trends weht.
+            </p>
+          </div>
+          <div>
+            <a class="link-arrow" href="./manifest.html">
+              Das Manifest lesen
+              <span class="material-symbols-outlined" aria-hidden="true">east</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CTA -->
+    <section class="section text-center" id="audit">
+      <div class="shell flex-col items-center stack-32" data-reveal>
+        <span class="meta">[03] Der nächste Schritt</span>
+        <h2 class="section-headline" style="max-width: 20ch;">
+          Bereit für Klarheit?
+        </h2>
+        <p class="editorial dim max-prose">
+          Das Marken-Klarheits-Audit. Eine schonungslose Diagnose Ihres aktuellen Status Quo.
+        </p>
+        <div>
+          <a class="btn" href="./methode.html#audit">
+            Audit anfragen
+            <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
+          </a>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <!-- Footer -->
+  <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>
+
+  <script src="./assets/js/app.js" defer></script>
+</body>
+</html>

_markemacht.de/manifest.html

@@ -0,0 +1,317 @@
+<!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>Das Manifest · MARKE MACHT</title>
+    <meta
+      name="description"
+      content="Warum Marke kein Marketingthema ist. Vier Konsequenzen einer tragfähigen Marke: Erklärbarkeit, Konsistenz, Unabhängigkeit, Vererbbarkeit."
+    />
+
+    <meta property="og:type" content="article" />
+    <meta property="og:site_name" content="MARKE MACHT" />
+    <meta property="og:title" content="Das Manifest · MARKE MACHT" />
+    <meta
+      property="og:description"
+      content="Marke ist nicht Design. Marke ist nicht Marketing. Marke ist die Fähigkeit eines Unternehmens, sich selbst eindeutig zu erklären."
+    />
+    <meta property="og:url" content="https://markemacht.de/manifest.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/manifest.html" />
+
+    <script>
+      (function () {
+        try {
+          var v = localStorage.getItem("mm-wirkung");
+          if (v !== "monolith" && v !== "editorial") v = "monolith";
+          document.documentElement.setAttribute("data-theme", v);
+        } catch (_) {}
+      })();
+    </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>
+    <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 is-active" href="./manifest.html">Manifest</a>
+          <a class="nav-link" href="./methode.html">Methode</a>
+          <a class="nav-link" 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 is-active" href="./manifest.html"
+          >Manifest</a
+        >
+        <a class="mobile-drawer-link" href="./methode.html">Methode</a>
+        <a class="mobile-drawer-link" 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>
+
+    <main id="main">
+      <!-- Hero mit Texture-Keyvisual -->
+      <header class="hero">
+        <div class="hero-keyvisual" aria-hidden="true">
+          <div class="monolith monolith--texture"></div>
+        </div>
+
+        <div class="shell grid-12 hero-grid">
+          <div class="col-12 stack-24" data-reveal>
+            <span class="meta">[00] Das Manifest</span>
+            <h1 class="hero-headline" style="max-width: 18ch">
+              Warum Marke kein Marketingthema ist.
+            </h1>
+          </div>
+        </div>
+      </header>
+
+      <!-- Einleitung -->
+      <section class="section-tight">
+        <div class="shell grid-12 items-start">
+          <div class="col-12 stack-32 max-wide" data-reveal>
+            <span class="meta">[01] Einleitung</span>
+            <p class="editorial" style="color: rgb(var(--color-text-primary))">
+              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="body-text max-prose">
+              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>
+
+      <!-- Zentrale These -->
+      <section class="quote-block" data-reveal>
+        <div class="shell">
+          <div class="quote-wrap">
+            <span class="quote-mark" aria-hidden="true">“</span>
+            <blockquote class="quote">
+              Marke ist nicht Design. Marke ist nicht Marketing.<br />
+              <span class="quote-dim"
+                >Marke ist die Fähigkeit eines Unternehmens, sich selbst
+                eindeutig zu erklären.</span
+              >
+            </blockquote>
+          </div>
+        </div>
+      </section>
+
+      <!-- Was das bedeutet -->
+      <section class="section">
+        <div class="shell grid-12">
+          <div class="col-12 stack-16" data-reveal>
+            <span class="meta">[02] Was das konkret bedeutet</span>
+          </div>
+          <div class="col-12 stack-48" data-reveal>
+            <h2 class="section-headline" style="max-width: 18ch">
+              Vier Konsequenzen einer tragfähigen Marke.
+            </h2>
+
+            <div class="grid-12">
+              <article class="card stack-16 col-12 md:col-5" data-reveal>
+                <span class="meta accent">[01] Erklärbarkeit</span>
+                <h3 class="sub-headline">Reduktion auf das Wesentliche.</h3>
+                <p class="body-text">
+                  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>
+              </article>
+
+              <article
+                class="card stack-16 col-12 md:col-5 md:col-start-7"
+                data-reveal
+                data-reveal-delay="80"
+              >
+                <span class="meta accent">[02] Konsistenz</span>
+                <h3 class="sub-headline">Eine gemeinsame Logik.</h3>
+                <p class="body-text">
+                  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>
+              </article>
+
+              <article class="card stack-16 col-12 md:col-5" data-reveal>
+                <span class="meta accent">[03] Unabhängigkeit</span>
+                <h3 class="sub-headline">Eigener Gravitationsbereich.</h3>
+                <p class="body-text">
+                  Eine 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>
+              </article>
+
+              <article
+                class="card stack-16 col-12 md:col-5 md:col-start-7"
+                data-reveal
+                data-reveal-delay="80"
+              >
+                <span class="meta accent">[04] Vererbbarkeit</span>
+                <h3 class="sub-headline">Identität als Betriebssystem.</h3>
+                <p class="body-text">
+                  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>
+              </article>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Überleitung -->
+      <section class="section">
+        <div class="shell grid-12">
+          <div class="col-12 md:col-8 card stack-32" data-reveal>
+            <h2 class="editorial" style="color: rgb(var(--color-text-primary))">
+              Wenn Marke ein Strukturproblem ist, braucht es eine Methode, um
+              sie zu bauen.
+            </h2>
+            <div>
+              <a class="link-arrow" href="./methode.html">
+                Die Methode verstehen
+                <span class="material-symbols-outlined" aria-hidden="true"
+                  >arrow_forward</span
+                >
+              </a>
+            </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>
+
+    <script src="./assets/js/app.js" defer></script>
+  </body>
+</html>

_markemacht.de/methode.html

@@ -0,0 +1,283 @@
+<!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>Die Methode · MARKE MACHT</title>
+  <meta name="description" content="Brand Engineering. Keine kreative Spielerei, sondern architektonische Konstruktion. Fünf Bausteine der Marken-DNA." />
+
+  <meta property="og:type" content="article" />
+  <meta property="og:site_name" content="MARKE MACHT" />
+  <meta property="og:title" content="Die Methode · Brand Engineering" />
+  <meta property="og:description" content="Marken werden nicht gefunden. Sie werden konstruiert. Ein System aus Logik, nicht aus Bauchgefühl." />
+  <meta property="og:url" content="https://markemacht.de/methode.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/methode.html" />
+
+  <script>
+    (function () {
+      try {
+        var v = localStorage.getItem('mm-wirkung');
+        if (v !== 'monolith' && v !== 'editorial') v = 'monolith';
+        document.documentElement.setAttribute('data-theme', v);
+      } catch (_) {}
+    })();
+  </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>
+
+  <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 is-active" href="./methode.html">Methode</a>
+        <a class="nav-link" 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="#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 is-active" href="./methode.html">Methode</a>
+      <a class="mobile-drawer-link" 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="#audit">
+        Audit anfragen
+        <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
+      </a>
+    </div>
+  </aside>
+
+  <main id="main">
+    <!-- Hero -->
+    <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 stack-24" data-reveal>
+          <span class="meta">[01] Die Methode</span>
+          <h1 class="hero-headline" style="max-width: 14ch;">
+            Brand Engineering.
+          </h1>
+          <p class="editorial dim max-wide">
+            Keine kreative Spielerei, sondern architektonische Konstruktion. Wir ersetzen das Raten durch Systematik und bauen Fundamente, die Lasten tragen.
+          </p>
+        </div>
+      </div>
+    </header>
+
+    <!-- Haltung -->
+    <section class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12 stack-16" data-reveal>
+          <span class="meta">[02] Haltung</span>
+        </div>
+
+        <div class="col-12 stack-48">
+          <article class="stack-16 max-prose" data-reveal>
+            <h3 class="sub-headline">Gebaut.</h3>
+            <p class="body-text">
+              Marken werden nicht in Workshops »gefunden« oder »entwickelt«. Sie werden aus harten unternehmerischen Wahrheiten konstruiert. Ein System aus Logik, nicht aus Bauchgefühl.
+            </p>
+          </article>
+
+          <article class="stack-16 max-prose" data-reveal>
+            <h3 class="sub-headline">Dokumentiert.</h3>
+            <p class="body-text">
+              Was nicht aufgeschrieben ist, existiert nicht. Wir verwandeln implizites Gründerwissen in explizite Regelwerke. Gefühlte Identität wird zu greifbarem Code.
+            </p>
+          </article>
+
+          <article class="stack-16 max-prose" data-reveal>
+            <h3 class="sub-headline">Nutzbar.</h3>
+            <p class="body-text">
+              Das Ziel ist nicht die hübsche Präsentation in der Schublade, sondern das funktionale Werkzeug für den Alltag. Entscheidungsfilter statt Bilderbuch.
+            </p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <!-- Editorial Split: Von der Theorie zur Praxis -->
+    <section class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12 stack-16" data-reveal>
+          <span class="meta">[03] Übergang</span>
+        </div>
+        <div class="col-12" data-reveal>
+          <div class="split">
+            <div class="split-visual" aria-hidden="true"></div>
+            <div class="stack-24">
+              <h2 class="section-headline">Von der Theorie zur Praxis.</h2>
+              <p class="editorial" style="color: rgb(var(--color-text-primary));">
+                Der Übergang von der strategischen Definition zur systematischen Dokumentation stellt sicher, dass Designentscheidungen nicht willkürlich, sondern begründet sind.
+              </p>
+              <p class="body-text">
+                Erst die Überführung in anwendbare Werkzeuge erweckt die Marken-DNA zum Leben. Dieser dreistufige Prozess garantiert, dass die intellektuelle Tiefe der Strategie in der täglichen Umsetzung nicht verloren geht, sondern sich als konsistentes Markenerlebnis manifestiert.
+              </p>
+              <div>
+                <a class="link-arrow" href="./manifest.html">
+                  Manifest lesen
+                  <span class="material-symbols-outlined" aria-hidden="true">east</span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Marken-DNA -->
+    <section class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12 stack-16" data-reveal>
+          <span class="meta">[04] Die Marken-DNA</span>
+        </div>
+        <div class="col-12 stack-48" data-reveal>
+          <h2 class="section-headline" style="max-width: 16ch;">Fünf Bausteine.</h2>
+
+          <div class="stack-16">
+            <article class="card dna-item stack-16" data-reveal>
+              <span class="meta accent">[01]</span>
+              <h3 class="sub-headline">Identitätskern</h3>
+              <p class="body-text max-prose">
+                Die unverhandelbare Essenz. Wer sind Sie, wenn alle Produkte und Services wegfallen? Der Ursprung jeder unternehmerischen Handlung und Haltung.
+              </p>
+            </article>
+
+            <article class="card dna-item stack-16" data-reveal>
+              <span class="meta accent">[02]</span>
+              <h3 class="sub-headline">Positionierungslogik</h3>
+              <p class="body-text max-prose">
+                Die geometrische Verortung im Markt. Kein »wir sind die Besten«, sondern ein klares Koordinatensystem aus Relevanz, Differenzierung und Beweisführung.
+              </p>
+            </article>
+
+            <article class="card dna-item stack-16" data-reveal>
+              <span class="meta accent">[03]</span>
+              <h3 class="sub-headline">Sprachregeln</h3>
+              <p class="body-text max-prose">
+                Das verbale Betriebssystem. Ein präziser Code aus erlaubten Vokabeln, verbotenen Phrasen und tonaler Härte. Text als Architektur, nicht als Dekoration.
+              </p>
+            </article>
+
+            <article class="card dna-item stack-16" data-reveal>
+              <span class="meta accent">[04]</span>
+              <h3 class="sub-headline">Themenrahmen</h3>
+              <p class="body-text max-prose">
+                Die inhaltlichen Grenzen. Worüber sprechen wir? Wichtiger noch: Worüber schweigen wir konsequent? Fokus durch systematische Exklusion.
+              </p>
+            </article>
+
+            <article class="card dna-item stack-16" data-reveal>
+              <span class="meta accent">[05]</span>
+              <h3 class="sub-headline">Grenzregeln</h3>
+              <p class="body-text max-prose">
+                Der rote Bereich. Die exakte Definition dessen, was die Marke zerstört. Leitplanken für schnelle, sichere Entscheidungen im operativen Alltag.
+              </p>
+            </article>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Der Architekt -->
+    <section class="section section-border-top">
+      <div class="shell grid-12">
+        <div class="col-12 stack-16" data-reveal>
+          <span class="meta">[05] Der Architekt</span>
+        </div>
+        <div class="col-12 stack-24" data-reveal>
+          <h2 class="section-headline">Kevin Adametz.</h2>
+          <span class="meta accent">Methodischer Urheber</span>
+          <p class="body-text max-prose">
+            Strukturiert Chaos. Transformiert diffuse Firmenkulturen in nutzbare Systeme. Berät mittelständische Unternehmer an der Schnittstelle von Identität, Strategie und knallharter Umsetzung. Kein Bullshit, nur Fundamente.
+          </p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Audit CTA -->
+    <section class="section section-border-top" id="audit">
+      <div class="shell grid-12">
+        <div class="col-12 stack-16" data-reveal>
+          <span class="meta">[06] Audit</span>
+        </div>
+        <div class="col-12 card stack-32" style="padding: clamp(40px, 6vw, 96px);" data-reveal>
+          <h2 class="section-headline" style="max-width: 18ch;">Systemstatus prüfen.</h2>
+          <p class="editorial dim max-prose">
+            Das Marken-Klarheits-Audit. Eine schonungslose Diagnose Ihres aktuellen Status Quo. Wir finden die Risse im Fundament, bevor sie strukturell werden.
+          </p>
+          <div>
+            <a class="link-arrow" href="#">
+              Audit Details &amp; Anfrage
+              <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
+            </a>
+          </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>
+
+  <script src="./assets/js/app.js" defer></script>
+</body>
+</html>

app/Actions/Fortify/CreateNewUser.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Actions\Fortify;
+
+use App\Concerns\PasswordValidationRules;
+use App\Concerns\ProfileValidationRules;
+use App\Models\User;
+use Illuminate\Support\Facades\Validator;
+use Laravel\Fortify\Contracts\CreatesNewUsers;
+
+class CreateNewUser implements CreatesNewUsers
+{
+    use PasswordValidationRules, ProfileValidationRules;
+
+    /**
+     * Validate and create a newly registered user.
+     *
+     * @param  array<string, string>  $input
+     */
+    public function create(array $input): User
+    {
+        Validator::make($input, [
+            ...$this->profileRules(),
+            'password' => $this->passwordRules(),
+        ])->validate();
+
+        return User::create([
+            'name' => $input['name'],
+            'email' => $input['email'],
+            'password' => $input['password'],
+        ]);
+    }
+}

app/Actions/Fortify/ResetUserPassword.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Actions\Fortify;
+
+use App\Concerns\PasswordValidationRules;
+use App\Models\User;
+use Illuminate\Support\Facades\Validator;
+use Laravel\Fortify\Contracts\ResetsUserPasswords;
+
+class ResetUserPassword implements ResetsUserPasswords
+{
+    use PasswordValidationRules;
+
+    /**
+     * Validate and reset the user's forgotten password.
+     *
+     * @param  array<string, string>  $input
+     */
+    public function reset(User $user, array $input): void
+    {
+        Validator::make($input, [
+            'password' => $this->passwordRules(),
+        ])->validate();
+
+        $user->forceFill([
+            'password' => $input['password'],
+        ])->save();
+    }
+}

app/Concerns/PasswordValidationRules.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Concerns;
+
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Validation\Rules\Password;
+
+trait PasswordValidationRules
+{
+    /**
+     * Get the validation rules used to validate passwords.
+     *
+     * @return array<int, ValidationRule|array<mixed>|string>
+     */
+    protected function passwordRules(): array
+    {
+        return ['required', 'string', Password::default(), 'confirmed'];
+    }
+
+    /**
+     * Get the validation rules used to validate the current password.
+     *
+     * @return array<int, ValidationRule|array<mixed>|string>
+     */
+    protected function currentPasswordRules(): array
+    {
+        return ['required', 'string', 'current_password'];
+    }
+}

app/Concerns/ProfileValidationRules.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Concerns;
+
+use App\Models\User;
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Validation\Rule;
+
+trait ProfileValidationRules
+{
+    /**
+     * Get the validation rules used to validate user profiles.
+     *
+     * @return array<string, array<int, ValidationRule|array<mixed>|string>>
+     */
+    protected function profileRules(?int $userId = null): array
+    {
+        return [
+            'name' => $this->nameRules(),
+            'email' => $this->emailRules($userId),
+        ];
+    }
+
+    /**
+     * Get the validation rules used to validate user names.
+     *
+     * @return array<int, ValidationRule|array<mixed>|string>
+     */
+    protected function nameRules(): array
+    {
+        return ['required', 'string', 'max:255'];
+    }
+
+    /**
+     * Get the validation rules used to validate user emails.
+     *
+     * @return array<int, ValidationRule|array<mixed>|string>
+     */
+    protected function emailRules(?int $userId = null): array
+    {
+        return [
+            'required',
+            'string',
+            'email',
+            'max:255',
+            $userId === null
+                ? Rule::unique(User::class)
+                : Rule::unique(User::class)->ignore($userId),
+        ];
+    }
+}

app/Http/Controllers/Controller.php

@@ -0,0 +1,8 @@
+<?php
+
+namespace App\Http\Controllers;
+
+abstract class Controller
+{
+    //
+}

app/Livewire/Actions/Logout.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Livewire\Actions;
+
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Session;
+
+class Logout
+{
+    /**
+     * Log the current user out of the application.
+     */
+    public function __invoke()
+    {
+        Auth::guard('web')->logout();
+
+        Session::invalidate();
+        Session::regenerateToken();
+
+        return redirect('/');
+    }
+}

app/Models/User.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Models;
+
+// use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Database\Factories\UserFactory;
+use Illuminate\Database\Eloquent\Attributes\Fillable;
+use Illuminate\Database\Eloquent\Attributes\Hidden;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Foundation\Auth\User as Authenticatable;
+use Illuminate\Notifications\Notifiable;
+use Illuminate\Support\Str;
+use Laravel\Fortify\Contracts\PasskeyUser;
+use Laravel\Fortify\PasskeyAuthenticatable;
+use Laravel\Fortify\TwoFactorAuthenticatable;
+
+#[Fillable(['name', 'email', 'password'])]
+#[Hidden(['password', 'two_factor_secret', 'two_factor_recovery_codes', 'remember_token'])]
+class User extends Authenticatable implements PasskeyUser
+{
+    /** @use HasFactory<UserFactory> */
+    use HasFactory, Notifiable, PasskeyAuthenticatable, TwoFactorAuthenticatable;
+
+    /**
+     * Get the attributes that should be cast.
+     *
+     * @return array<string, string>
+     */
+    protected function casts(): array
+    {
+        return [
+            'email_verified_at' => 'datetime',
+            'password' => 'hashed',
+        ];
+    }
+
+    /**
+     * Get the user's initials
+     */
+    public function initials(): string
+    {
+        return Str::of($this->name)
+            ->explode(' ')
+            ->take(2)
+            ->map(fn ($word) => Str::substr($word, 0, 1))
+            ->implode('');
+    }
+}

app/Providers/AppServiceProvider.php

@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Providers;
+
+use Carbon\CarbonImmutable;
+use Illuminate\Support\Facades\Date;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\ServiceProvider;
+use Illuminate\Validation\Rules\Password;
+
+class AppServiceProvider extends ServiceProvider
+{
+    /**
+     * Register any application services.
+     */
+    public function register(): void
+    {
+        //
+    }
+
+    /**
+     * Bootstrap any application services.
+     */
+    public function boot(): void
+    {
+        $this->configureDefaults();
+    }
+
+    /**
+     * Configure default behaviors for production-ready applications.
+     */
+    protected function configureDefaults(): void
+    {
+        Date::use(CarbonImmutable::class);
+
+        DB::prohibitDestructiveCommands(
+            app()->isProduction(),
+        );
+
+        Password::defaults(fn (): ?Password => app()->isProduction()
+            ? Password::min(12)
+                ->mixedCase()
+                ->letters()
+                ->numbers()
+                ->symbols()
+                ->uncompromised()
+            : null,
+        );
+    }
+}

app/Providers/FortifyServiceProvider.php

@@ -0,0 +1,80 @@
+<?php
+
+namespace App\Providers;
+
+use App\Actions\Fortify\CreateNewUser;
+use App\Actions\Fortify\ResetUserPassword;
+use Illuminate\Cache\RateLimiting\Limit;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\RateLimiter;
+use Illuminate\Support\ServiceProvider;
+use Illuminate\Support\Str;
+use Laravel\Fortify\Fortify;
+
+class FortifyServiceProvider extends ServiceProvider
+{
+    /**
+     * Register any application services.
+     */
+    public function register(): void
+    {
+        //
+    }
+
+    /**
+     * Bootstrap any application services.
+     */
+    public function boot(): void
+    {
+        $this->configureActions();
+        $this->configureViews();
+        $this->configureRateLimiting();
+    }
+
+    /**
+     * Configure Fortify actions.
+     */
+    private function configureActions(): void
+    {
+        Fortify::resetUserPasswordsUsing(ResetUserPassword::class);
+        Fortify::createUsersUsing(CreateNewUser::class);
+    }
+
+    /**
+     * Configure Fortify views.
+     */
+    private function configureViews(): void
+    {
+        Fortify::loginView(fn () => view('pages::auth.login'));
+        Fortify::verifyEmailView(fn () => view('pages::auth.verify-email'));
+        Fortify::twoFactorChallengeView(fn () => view('pages::auth.two-factor-challenge'));
+        Fortify::confirmPasswordView(fn () => view('pages::auth.confirm-password'));
+        Fortify::registerView(fn () => view('pages::auth.register'));
+        Fortify::resetPasswordView(fn () => view('pages::auth.reset-password'));
+        Fortify::requestPasswordResetLinkView(fn () => view('pages::auth.forgot-password'));
+    }
+
+    /**
+     * Configure rate limiting.
+     */
+    private function configureRateLimiting(): void
+    {
+        RateLimiter::for('two-factor', function (Request $request) {
+            return Limit::perMinute(5)->by($request->session()->get('login.id'));
+        });
+
+        RateLimiter::for('login', function (Request $request) {
+            $throttleKey = Str::transliterate(Str::lower($request->input(Fortify::username())).'|'.$request->ip());
+
+            return Limit::perMinute(5)->by($throttleKey);
+        });
+
+        RateLimiter::for('passkeys', function (Request $request) {
+            $credentialId = $request->input('credential.id');
+
+            return Limit::perMinute(10)->by(
+                ($credentialId ?: $request->session()->getId()).'|'.$request->ip(),
+            );
+        });
+    }
+}

artisan

@@ -0,0 +1,18 @@
+#!/usr/bin/env php
+<?php
+
+use Illuminate\Foundation\Application;
+use Symfony\Component\Console\Input\ArgvInput;
+
+define('LARAVEL_START', microtime(true));
+
+// Register the Composer autoloader...
+require __DIR__.'/vendor/autoload.php';
+
+// Bootstrap Laravel and handle the command...
+/** @var Application $app */
+$app = require_once __DIR__.'/bootstrap/app.php';
+
+$status = $app->handleCommand(new ArgvInput);
+
+exit($status);

bootstrap/app.php

@@ -0,0 +1,18 @@
+<?php
+
+use Illuminate\Foundation\Application;
+use Illuminate\Foundation\Configuration\Exceptions;
+use Illuminate\Foundation\Configuration\Middleware;
+
+return Application::configure(basePath: dirname(__DIR__))
+    ->withRouting(
+        web: __DIR__.'/../routes/web.php',
+        commands: __DIR__.'/../routes/console.php',
+        health: '/up',
+    )
+    ->withMiddleware(function (Middleware $middleware): void {
+        //
+    })
+    ->withExceptions(function (Exceptions $exceptions): void {
+        //
+    })->create();

bootstrap/cache/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

bootstrap/providers.php

@@ -0,0 +1,9 @@
+<?php
+
+use App\Providers\AppServiceProvider;
+use App\Providers\FortifyServiceProvider;
+
+return [
+    AppServiceProvider::class,
+    FortifyServiceProvider::class,
+];

composer.json

@@ -0,0 +1,109 @@
+{
+    "$schema": "https://getcomposer.org/schema.json",
+    "name": "laravel/livewire-starter-kit",
+    "type": "project",
+    "description": "The official Laravel starter kit for Livewire.",
+    "keywords": [
+        "laravel",
+        "framework"
+    ],
+    "license": "MIT",
+    "require": {
+        "php": "^8.3",
+        "laravel/chisel": "^0.1.0",
+        "laravel/fortify": "^1.37.2",
+        "laravel/framework": "^13.7",
+        "laravel/tinker": "^3.0",
+        "livewire/flux": "^2.13.1",
+        "livewire/livewire": "^4.1"
+    },
+    "require-dev": {
+        "fakerphp/faker": "^1.24",
+        "laravel/pail": "^1.2.5",
+        "laravel/pao": "^1.0.6",
+        "laravel/pint": "^1.27",
+        "laravel/sail": "^1.53",
+        "mockery/mockery": "^1.6",
+        "nunomaduro/collision": "^8.9.3",
+        "pestphp/pest": "^4.7",
+        "pestphp/pest-plugin-laravel": "^4.1"
+    },
+    "autoload": {
+        "psr-4": {
+            "App\\": "app/",
+            "Database\\Factories\\": "database/factories/",
+            "Database\\Seeders\\": "database/seeders/"
+        }
+    },
+    "autoload-dev": {
+        "psr-4": {
+            "Tests\\": "tests/"
+        }
+    },
+    "scripts": {
+        "setup": [
+            "composer install",
+            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"",
+            "@php artisan key:generate",
+            "@php artisan migrate --force",
+            "npm install",
+            "npm run build"
+        ],
+        "dev": [
+            "Composer\\Config::disableProcessTimeout",
+            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve --host=localhost\" \"php artisan queue:listen --tries=1 --timeout=0\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite --kill-others"
+        ],
+        "lint": [
+            "pint --parallel"
+        ],
+        "lint:check": [
+            "pint --parallel --test"
+        ],
+        "ci:check": [
+            "Composer\\Config::disableProcessTimeout",
+            "@test"
+        ],
+        "test": [
+            "@php artisan config:clear --ansi",
+            "@lint:check",
+            "@php artisan test"
+        ],
+        "post-autoload-dump": [
+            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
+            "@php artisan package:discover --ansi"
+        ],
+        "post-update-cmd": [
+            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
+        ],
+        "post-root-package-install": [
+            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
+        ],
+        "post-create-project-cmd": [
+            "@php artisan key:generate --ansi",
+            "@php -r \"file_exists('database/database.sqlite') || touch('database/database.sqlite');\"",
+            "@php artisan migrate --graceful --ansi"
+        ],
+        "pre-package-uninstall": [
+            "Illuminate\\Foundation\\ComposerScripts::prePackageUninstall"
+        ]
+    },
+    "extra": {
+        "laravel": {
+            "dont-discover": [],
+            "installer": {
+                "post-create-project": []
+            }
+        }
+    },
+    "config": {
+        "optimize-autoloader": true,
+        "preferred-install": "dist",
+        "sort-packages": true,
+        "allow-plugins": {
+            "pestphp/pest-plugin": true,
+            "php-http/discovery": true
+        }
+    },
+    "minimum-stability": "stable",
+    "prefer-stable": true
+}

config/app.php

@@ -0,0 +1,126 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Name
+    |--------------------------------------------------------------------------
+    |
+    | This value is the name of your application, which will be used when the
+    | framework needs to place the application's name in a notification or
+    | other UI elements where an application name needs to be displayed.
+    |
+    */
+
+    'name' => env('APP_NAME', 'Laravel'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Environment
+    |--------------------------------------------------------------------------
+    |
+    | This value determines the "environment" your application is currently
+    | running in. This may determine how you prefer to configure various
+    | services the application utilizes. Set this in your ".env" file.
+    |
+    */
+
+    'env' => env('APP_ENV', 'production'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Debug Mode
+    |--------------------------------------------------------------------------
+    |
+    | When your application is in debug mode, detailed error messages with
+    | stack traces will be shown on every error that occurs within your
+    | application. If disabled, a simple generic error page is shown.
+    |
+    */
+
+    'debug' => (bool) env('APP_DEBUG', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application URL
+    |--------------------------------------------------------------------------
+    |
+    | This URL is used by the console to properly generate URLs when using
+    | the Artisan command line tool. You should set this to the root of
+    | the application so that it's available within Artisan commands.
+    |
+    */
+
+    'url' => env('APP_URL', 'http://localhost'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Timezone
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default timezone for your application, which
+    | will be used by the PHP date and date-time functions. The timezone
+    | is set to "UTC" by default as it is suitable for most use cases.
+    |
+    */
+
+    'timezone' => 'UTC',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Application Locale Configuration
+    |--------------------------------------------------------------------------
+    |
+    | The application locale determines the default locale that will be used
+    | by Laravel's translation / localization methods. This option can be
+    | set to any locale for which you plan to have translation strings.
+    |
+    */
+
+    'locale' => env('APP_LOCALE', 'en'),
+
+    'fallback_locale' => env('APP_FALLBACK_LOCALE', 'en'),
+
+    'faker_locale' => env('APP_FAKER_LOCALE', 'en_US'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Encryption Key
+    |--------------------------------------------------------------------------
+    |
+    | This key is utilized by Laravel's encryption services and should be set
+    | to a random, 32 character string to ensure that all encrypted values
+    | are secure. You should do this prior to deploying the application.
+    |
+    */
+
+    'cipher' => 'AES-256-CBC',
+
+    'key' => env('APP_KEY'),
+
+    'previous_keys' => [
+        ...array_filter(
+            explode(',', (string) env('APP_PREVIOUS_KEYS', '')),
+        ),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Maintenance Mode Driver
+    |--------------------------------------------------------------------------
+    |
+    | These configuration options determine the driver used to determine and
+    | manage Laravel's "maintenance mode" status. The "cache" driver will
+    | allow maintenance mode to be controlled across multiple machines.
+    |
+    | Supported drivers: "file", "cache"
+    |
+    */
+
+    'maintenance' => [
+        'driver' => env('APP_MAINTENANCE_DRIVER', 'file'),
+        'store' => env('APP_MAINTENANCE_STORE', 'database'),
+    ],
+
+];

config/auth.php

@@ -0,0 +1,117 @@
+<?php
+
+use App\Models\User;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Defaults
+    |--------------------------------------------------------------------------
+    |
+    | This option defines the default authentication "guard" and password
+    | reset "broker" for your application. You may change these values
+    | as required, but they're a perfect start for most applications.
+    |
+    */
+
+    'defaults' => [
+        'guard' => env('AUTH_GUARD', 'web'),
+        'passwords' => env('AUTH_PASSWORD_BROKER', 'users'),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Authentication Guards
+    |--------------------------------------------------------------------------
+    |
+    | Next, you may define every authentication guard for your application.
+    | Of course, a great default configuration has been defined for you
+    | which utilizes session storage plus the Eloquent user provider.
+    |
+    | All authentication guards have a user provider, which defines how the
+    | users are actually retrieved out of your database or other storage
+    | system used by the application. Typically, Eloquent is utilized.
+    |
+    | Supported: "session"
+    |
+    */
+
+    'guards' => [
+        'web' => [
+            'driver' => 'session',
+            'provider' => 'users',
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | User Providers
+    |--------------------------------------------------------------------------
+    |
+    | All authentication guards have a user provider, which defines how the
+    | users are actually retrieved out of your database or other storage
+    | system used by the application. Typically, Eloquent is utilized.
+    |
+    | If you have multiple user tables or models you may configure multiple
+    | providers to represent the model / table. These providers may then
+    | be assigned to any extra authentication guards you have defined.
+    |
+    | Supported: "database", "eloquent"
+    |
+    */
+
+    'providers' => [
+        'users' => [
+            'driver' => 'eloquent',
+            'model' => env('AUTH_MODEL', User::class),
+        ],
+
+        // 'users' => [
+        //     'driver' => 'database',
+        //     'table' => 'users',
+        // ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Resetting Passwords
+    |--------------------------------------------------------------------------
+    |
+    | These configuration options specify the behavior of Laravel's password
+    | reset functionality, including the table utilized for token storage
+    | and the user provider that is invoked to actually retrieve users.
+    |
+    | The expiry time is the number of minutes that each reset token will be
+    | considered valid. This security feature keeps tokens short-lived so
+    | they have less time to be guessed. You may change this as needed.
+    |
+    | The throttle setting is the number of seconds a user must wait before
+    | generating more password reset tokens. This prevents the user from
+    | quickly generating a very large amount of password reset tokens.
+    |
+    */
+
+    'passwords' => [
+        'users' => [
+            'provider' => 'users',
+            'table' => env('AUTH_PASSWORD_RESET_TOKEN_TABLE', 'password_reset_tokens'),
+            'expire' => 60,
+            'throttle' => 60,
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Password Confirmation Timeout
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define the number of seconds before a password confirmation
+    | window expires and users are asked to re-enter their password via the
+    | confirmation screen. By default, the timeout lasts for three hours.
+    |
+    */
+
+    'password_timeout' => env('AUTH_PASSWORD_TIMEOUT', 10800),
+
+];

config/cache.php

@@ -0,0 +1,130 @@
+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Cache Store
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default cache store that will be used by the
+    | framework. This connection is utilized if another isn't explicitly
+    | specified when running a cache operation inside the application.
+    |
+    */
+
+    'default' => env('CACHE_STORE', 'database'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cache Stores
+    |--------------------------------------------------------------------------
+    |
+    | Here you may define all of the cache "stores" for your application as
+    | well as their drivers. You may even define multiple stores for the
+    | same cache driver to group types of items stored in your caches.
+    |
+    | Supported drivers: "array", "database", "file", "memcached",
+    |                    "redis", "dynamodb", "octane",
+    |                    "failover", "null"
+    |
+    */
+
+    'stores' => [
+
+        'array' => [
+            'driver' => 'array',
+            'serialize' => false,
+        ],
+
+        'database' => [
+            'driver' => 'database',
+            'connection' => env('DB_CACHE_CONNECTION'),
+            'table' => env('DB_CACHE_TABLE', 'cache'),
+            'lock_connection' => env('DB_CACHE_LOCK_CONNECTION'),
+            'lock_table' => env('DB_CACHE_LOCK_TABLE'),
+        ],
+
+        'file' => [
+            'driver' => 'file',
+            'path' => storage_path('framework/cache/data'),
+            'lock_path' => storage_path('framework/cache/data'),
+        ],
+
+        'memcached' => [
+            'driver' => 'memcached',
+            'persistent_id' => env('MEMCACHED_PERSISTENT_ID'),
+            'sasl' => [
+                env('MEMCACHED_USERNAME'),
+                env('MEMCACHED_PASSWORD'),
+            ],
+            'options' => [
+                // Memcached::OPT_CONNECT_TIMEOUT => 2000,
+            ],
+            'servers' => [
+                [
+                    'host' => env('MEMCACHED_HOST', '127.0.0.1'),
+                    'port' => env('MEMCACHED_PORT', 11211),
+                    'weight' => 100,
+                ],
+            ],
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => env('REDIS_CACHE_CONNECTION', 'cache'),
+            'lock_connection' => env('REDIS_CACHE_LOCK_CONNECTION', 'default'),
+        ],
+
+        'dynamodb' => [
+            'driver' => 'dynamodb',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+            'table' => env('DYNAMODB_CACHE_TABLE', 'cache'),
+            'endpoint' => env('DYNAMODB_ENDPOINT'),
+        ],
+
+        'octane' => [
+            'driver' => 'octane',
+        ],
+
+        'failover' => [
+            'driver' => 'failover',
+            'stores' => [
+                'database',
+                'array',
+            ],
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Cache Key Prefix
+    |--------------------------------------------------------------------------
+    |
+    | When utilizing the APC, database, memcached, Redis, and DynamoDB cache
+    | stores, there might be other applications using the same cache. For
+    | that reason, you may prefix every cache key to avoid collisions.
+    |
+    */
+
+    'prefix' => env('CACHE_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-cache-'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Serializable Classes
+    |--------------------------------------------------------------------------
+    |
+    | This value determines the classes that can be unserialized from cache
+    | storage. By default, no PHP classes will be unserialized from your
+    | cache to prevent gadget chain attacks if your APP_KEY is leaked.
+    |
+    */
+
+    'serializable_classes' => false,
+
+];

config/database.php

@@ -0,0 +1,184 @@
+<?php
+
+use Illuminate\Support\Str;
+use Pdo\Mysql;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Database Connection Name
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which of the database connections below you wish
+    | to use as your default connection for database operations. This is
+    | the connection which will be utilized unless another connection
+    | is explicitly specified when you execute a query / statement.
+    |
+    */
+
+    'default' => env('DB_CONNECTION', 'sqlite'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Database Connections
+    |--------------------------------------------------------------------------
+    |
+    | Below are all of the database connections defined for your application.
+    | An example configuration is provided for each database system which
+    | is supported by Laravel. You're free to add / remove connections.
+    |
+    */
+
+    'connections' => [
+
+        'sqlite' => [
+            'driver' => 'sqlite',
+            'url' => env('DB_URL'),
+            'database' => env('DB_DATABASE', database_path('database.sqlite')),
+            'prefix' => '',
+            'foreign_key_constraints' => env('DB_FOREIGN_KEYS', true),
+            'busy_timeout' => null,
+            'journal_mode' => null,
+            'synchronous' => null,
+            'transaction_mode' => 'DEFERRED',
+        ],
+
+        'mysql' => [
+            'driver' => 'mysql',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '3306'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'unix_socket' => env('DB_SOCKET', ''),
+            'charset' => env('DB_CHARSET', 'utf8mb4'),
+            'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'strict' => true,
+            'engine' => null,
+            'options' => extension_loaded('pdo_mysql') ? array_filter([
+                (PHP_VERSION_ID >= 80500 ? Mysql::ATTR_SSL_CA : PDO::MYSQL_ATTR_SSL_CA) => env('MYSQL_ATTR_SSL_CA'),
+            ]) : [],
+        ],
+
+        'mariadb' => [
+            'driver' => 'mariadb',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '3306'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'unix_socket' => env('DB_SOCKET', ''),
+            'charset' => env('DB_CHARSET', 'utf8mb4'),
+            'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'strict' => true,
+            'engine' => null,
+            'options' => extension_loaded('pdo_mysql') ? array_filter([
+                (PHP_VERSION_ID >= 80500 ? Mysql::ATTR_SSL_CA : PDO::MYSQL_ATTR_SSL_CA) => env('MYSQL_ATTR_SSL_CA'),
+            ]) : [],
+        ],
+
+        'pgsql' => [
+            'driver' => 'pgsql',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', '127.0.0.1'),
+            'port' => env('DB_PORT', '5432'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'charset' => env('DB_CHARSET', 'utf8'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            'search_path' => 'public',
+            'sslmode' => env('DB_SSLMODE', 'prefer'),
+        ],
+
+        'sqlsrv' => [
+            'driver' => 'sqlsrv',
+            'url' => env('DB_URL'),
+            'host' => env('DB_HOST', 'localhost'),
+            'port' => env('DB_PORT', '1433'),
+            'database' => env('DB_DATABASE', 'laravel'),
+            'username' => env('DB_USERNAME', 'root'),
+            'password' => env('DB_PASSWORD', ''),
+            'charset' => env('DB_CHARSET', 'utf8'),
+            'prefix' => '',
+            'prefix_indexes' => true,
+            // 'encrypt' => env('DB_ENCRYPT', 'yes'),
+            // 'trust_server_certificate' => env('DB_TRUST_SERVER_CERTIFICATE', 'false'),
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Migration Repository Table
+    |--------------------------------------------------------------------------
+    |
+    | This table keeps track of all the migrations that have already run for
+    | your application. Using this information, we can determine which of
+    | the migrations on disk haven't actually been run on the database.
+    |
+    */
+
+    'migrations' => [
+        'table' => 'migrations',
+        'update_date_on_publish' => true,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Redis Databases
+    |--------------------------------------------------------------------------
+    |
+    | Redis is an open source, fast, and advanced key-value store that also
+    | provides a richer body of commands than a typical key-value system
+    | such as Memcached. You may define your connection settings here.
+    |
+    */
+
+    'redis' => [
+
+        'client' => env('REDIS_CLIENT', 'phpredis'),
+
+        'options' => [
+            'cluster' => env('REDIS_CLUSTER', 'redis'),
+            'prefix' => env('REDIS_PREFIX', Str::slug((string) env('APP_NAME', 'laravel')).'-database-'),
+            'persistent' => env('REDIS_PERSISTENT', false),
+        ],
+
+        'default' => [
+            'url' => env('REDIS_URL'),
+            'host' => env('REDIS_HOST', '127.0.0.1'),
+            'username' => env('REDIS_USERNAME'),
+            'password' => env('REDIS_PASSWORD'),
+            'port' => env('REDIS_PORT', '6379'),
+            'database' => env('REDIS_DB', '0'),
+            'max_retries' => env('REDIS_MAX_RETRIES', 3),
+            'backoff_algorithm' => env('REDIS_BACKOFF_ALGORITHM', 'decorrelated_jitter'),
+            'backoff_base' => env('REDIS_BACKOFF_BASE', 100),
+            'backoff_cap' => env('REDIS_BACKOFF_CAP', 1000),
+        ],
+
+        'cache' => [
+            'url' => env('REDIS_URL'),
+            'host' => env('REDIS_HOST', '127.0.0.1'),
+            'username' => env('REDIS_USERNAME'),
+            'password' => env('REDIS_PASSWORD'),
+            'port' => env('REDIS_PORT', '6379'),
+            'database' => env('REDIS_CACHE_DB', '1'),
+            'max_retries' => env('REDIS_MAX_RETRIES', 3),
+            'backoff_algorithm' => env('REDIS_BACKOFF_ALGORITHM', 'decorrelated_jitter'),
+            'backoff_base' => env('REDIS_BACKOFF_BASE', 100),
+            'backoff_cap' => env('REDIS_BACKOFF_CAP', 1000),
+        ],
+
+    ],
+
+];

config/filesystems.php

@@ -0,0 +1,80 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Filesystem Disk
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the default filesystem disk that should be used
+    | by the framework. The "local" disk, as well as a variety of cloud
+    | based disks are available to your application for file storage.
+    |
+    */
+
+    'default' => env('FILESYSTEM_DISK', 'local'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Filesystem Disks
+    |--------------------------------------------------------------------------
+    |
+    | Below you may configure as many filesystem disks as necessary, and you
+    | may even configure multiple disks for the same driver. Examples for
+    | most supported storage drivers are configured here for reference.
+    |
+    | Supported drivers: "local", "ftp", "sftp", "s3"
+    |
+    */
+
+    'disks' => [
+
+        'local' => [
+            'driver' => 'local',
+            'root' => storage_path('app/private'),
+            'serve' => true,
+            'throw' => false,
+            'report' => false,
+        ],
+
+        'public' => [
+            'driver' => 'local',
+            'root' => storage_path('app/public'),
+            'url' => rtrim(env('APP_URL', 'http://localhost'), '/').'/storage',
+            'visibility' => 'public',
+            'throw' => false,
+            'report' => false,
+        ],
+
+        's3' => [
+            'driver' => 's3',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'region' => env('AWS_DEFAULT_REGION'),
+            'bucket' => env('AWS_BUCKET'),
+            'url' => env('AWS_URL'),
+            'endpoint' => env('AWS_ENDPOINT'),
+            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
+            'throw' => false,
+            'report' => false,
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Symbolic Links
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the symbolic links that will be created when the
+    | `storage:link` Artisan command is executed. The array keys should be
+    | the locations of the links and the values should be their targets.
+    |
+    */
+
+    'links' => [
+        public_path('storage') => storage_path('app/public'),
+    ],
+
+];

config/fortify.php

@@ -0,0 +1,177 @@
+<?php
+
+use Laravel\Fortify\Features;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Fortify Guard
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which authentication guard Fortify will use while
+    | authenticating users. This value should correspond with one of your
+    | guards that is already present in your "auth" configuration file.
+    |
+    */
+
+    'guard' => 'web',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Fortify Password Broker
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which password broker Fortify can use when a user
+    | is resetting their password. This configured value should match one
+    | of your password brokers setup in your "auth" configuration file.
+    |
+    */
+
+    'passwords' => 'users',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Username / Email
+    |--------------------------------------------------------------------------
+    |
+    | This value defines which model attribute should be considered as your
+    | application's "username" field. Typically, this might be the email
+    | address of the users but you are free to change this value here.
+    |
+    | Out of the box, Fortify expects forgot password and reset password
+    | requests to have a field named 'email'. If the application uses
+    | another name for the field you may define it below as needed.
+    |
+    */
+
+    'username' => 'email',
+
+    'email' => 'email',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Lowercase Usernames
+    |--------------------------------------------------------------------------
+    |
+    | This value defines whether usernames should be lowercased before saving
+    | them in the database, as some database system string fields are case
+    | sensitive. You may disable this for your application if necessary.
+    |
+    */
+
+    'lowercase_usernames' => true,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Home Path
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the path where users will get redirected during
+    | authentication or password reset when the operations are successful
+    | and the user is authenticated. You are free to change this value.
+    |
+    */
+
+    'home' => '/dashboard',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Fortify Routes Prefix / Subdomain
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which prefix Fortify will assign to all the routes
+    | that it registers with the application. If necessary, you may change
+    | subdomain under which all of the Fortify routes will be available.
+    |
+    */
+
+    'prefix' => '',
+
+    'domain' => null,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Fortify Routes Middleware
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify which middleware Fortify will assign to the routes
+    | that it registers with the application. If necessary, you may change
+    | these middleware but typically this provided default is preferred.
+    |
+    */
+
+    'middleware' => ['web'],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Rate Limiting
+    |--------------------------------------------------------------------------
+    |
+    | By default, Fortify will throttle logins to five requests per minute for
+    | every email and IP address combination. However, if you would like to
+    | specify a custom rate limiter to call then you may specify it here.
+    |
+    */
+
+    'limiters' => [
+        'login' => 'login',
+        'two-factor' => 'two-factor',
+        'passkeys' => 'passkeys',
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Register View Routes
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify if the routes returning views should be disabled as
+    | you may not need them when building your own application. This may be
+    | especially true if you're writing a custom single-page application.
+    |
+    */
+
+    'views' => true,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Passkeys
+    |--------------------------------------------------------------------------
+    |
+    | These settings configure Fortify's passkey (WebAuthn) support.
+    |
+    */
+
+    'passkeys' => [
+        'relying_party_id' => parse_url(config('app.url'), PHP_URL_HOST),
+        'allowed_origins' => [config('app.url')],
+        'user_handle_secret' => env('PASSKEYS_USER_HANDLE_SECRET', config('app.key')),
+        'timeout' => 60000,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Features
+    |--------------------------------------------------------------------------
+    |
+    | Some of the Fortify features are optional. You may disable the features
+    | by removing them from this array. You're free to only remove some of
+    | these features, or you can even remove all of these if you need to.
+    |
+    */
+
+    'features' => [
+        Features::registration(),
+        Features::resetPasswords(),
+        Features::emailVerification(),
+        Features::twoFactorAuthentication([
+            'confirm' => true,
+            'confirmPassword' => true,
+            // 'window' => 0
+        ]),
+        Features::passkeys([
+            'confirmPassword' => true,
+        ]),
+    ],
+
+];

config/logging.php

@@ -0,0 +1,132 @@
+<?php
+
+use Monolog\Handler\NullHandler;
+use Monolog\Handler\StreamHandler;
+use Monolog\Handler\SyslogUdpHandler;
+use Monolog\Processor\PsrLogMessageProcessor;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Log Channel
+    |--------------------------------------------------------------------------
+    |
+    | This option defines the default log channel that is utilized to write
+    | messages to your logs. The value provided here should match one of
+    | the channels present in the list of "channels" configured below.
+    |
+    */
+
+    'default' => env('LOG_CHANNEL', 'stack'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Deprecations Log Channel
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the log channel that should be used to log warnings
+    | regarding deprecated PHP and library features. This allows you to get
+    | your application ready for upcoming major versions of dependencies.
+    |
+    */
+
+    'deprecations' => [
+        'channel' => env('LOG_DEPRECATIONS_CHANNEL', 'null'),
+        'trace' => env('LOG_DEPRECATIONS_TRACE', false),
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Log Channels
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the log channels for your application. Laravel
+    | utilizes the Monolog PHP logging library, which includes a variety
+    | of powerful log handlers and formatters that you're free to use.
+    |
+    | Available drivers: "single", "daily", "slack", "syslog",
+    |                    "errorlog", "monolog", "custom", "stack"
+    |
+    */
+
+    'channels' => [
+
+        'stack' => [
+            'driver' => 'stack',
+            'channels' => explode(',', (string) env('LOG_STACK', 'single')),
+            'ignore_exceptions' => false,
+        ],
+
+        'single' => [
+            'driver' => 'single',
+            'path' => storage_path('logs/laravel.log'),
+            'level' => env('LOG_LEVEL', 'debug'),
+            'replace_placeholders' => true,
+        ],
+
+        'daily' => [
+            'driver' => 'daily',
+            'path' => storage_path('logs/laravel.log'),
+            'level' => env('LOG_LEVEL', 'debug'),
+            'days' => env('LOG_DAILY_DAYS', 14),
+            'replace_placeholders' => true,
+        ],
+
+        'slack' => [
+            'driver' => 'slack',
+            'url' => env('LOG_SLACK_WEBHOOK_URL'),
+            'username' => env('LOG_SLACK_USERNAME', env('APP_NAME', 'Laravel')),
+            'emoji' => env('LOG_SLACK_EMOJI', ':boom:'),
+            'level' => env('LOG_LEVEL', 'critical'),
+            'replace_placeholders' => true,
+        ],
+
+        'papertrail' => [
+            'driver' => 'monolog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'handler' => env('LOG_PAPERTRAIL_HANDLER', SyslogUdpHandler::class),
+            'handler_with' => [
+                'host' => env('PAPERTRAIL_URL'),
+                'port' => env('PAPERTRAIL_PORT'),
+                'connectionString' => 'tls://'.env('PAPERTRAIL_URL').':'.env('PAPERTRAIL_PORT'),
+            ],
+            'processors' => [PsrLogMessageProcessor::class],
+        ],
+
+        'stderr' => [
+            'driver' => 'monolog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'handler' => StreamHandler::class,
+            'handler_with' => [
+                'stream' => 'php://stderr',
+            ],
+            'formatter' => env('LOG_STDERR_FORMATTER'),
+            'processors' => [PsrLogMessageProcessor::class],
+        ],
+
+        'syslog' => [
+            'driver' => 'syslog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'facility' => env('LOG_SYSLOG_FACILITY', LOG_USER),
+            'replace_placeholders' => true,
+        ],
+
+        'errorlog' => [
+            'driver' => 'errorlog',
+            'level' => env('LOG_LEVEL', 'debug'),
+            'replace_placeholders' => true,
+        ],
+
+        'null' => [
+            'driver' => 'monolog',
+            'handler' => NullHandler::class,
+        ],
+
+        'emergency' => [
+            'path' => storage_path('logs/laravel.log'),
+        ],
+
+    ],
+
+];

config/mail.php

@@ -0,0 +1,118 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Mailer
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default mailer that is used to send all email
+    | messages unless another mailer is explicitly specified when sending
+    | the message. All additional mailers can be configured within the
+    | "mailers" array. Examples of each type of mailer are provided.
+    |
+    */
+
+    'default' => env('MAIL_MAILER', 'log'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Mailer Configurations
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure all of the mailers used by your application plus
+    | their respective settings. Several examples have been configured for
+    | you and you are free to add your own as your application requires.
+    |
+    | Laravel supports a variety of mail "transport" drivers that can be used
+    | when delivering an email. You may specify which one you're using for
+    | your mailers below. You may also add additional mailers if needed.
+    |
+    | Supported: "smtp", "sendmail", "mailgun", "ses", "ses-v2",
+    |            "postmark", "resend", "log", "array",
+    |            "failover", "roundrobin"
+    |
+    */
+
+    'mailers' => [
+
+        'smtp' => [
+            'transport' => 'smtp',
+            'scheme' => env('MAIL_SCHEME'),
+            'url' => env('MAIL_URL'),
+            'host' => env('MAIL_HOST', '127.0.0.1'),
+            'port' => env('MAIL_PORT', 2525),
+            'username' => env('MAIL_USERNAME'),
+            'password' => env('MAIL_PASSWORD'),
+            'timeout' => null,
+            'local_domain' => env('MAIL_EHLO_DOMAIN', parse_url((string) env('APP_URL', 'http://localhost'), PHP_URL_HOST)),
+        ],
+
+        'ses' => [
+            'transport' => 'ses',
+        ],
+
+        'postmark' => [
+            'transport' => 'postmark',
+            // 'message_stream_id' => env('POSTMARK_MESSAGE_STREAM_ID'),
+            // 'client' => [
+            //     'timeout' => 5,
+            // ],
+        ],
+
+        'resend' => [
+            'transport' => 'resend',
+        ],
+
+        'sendmail' => [
+            'transport' => 'sendmail',
+            'path' => env('MAIL_SENDMAIL_PATH', '/usr/sbin/sendmail -bs -i'),
+        ],
+
+        'log' => [
+            'transport' => 'log',
+            'channel' => env('MAIL_LOG_CHANNEL'),
+        ],
+
+        'array' => [
+            'transport' => 'array',
+        ],
+
+        'failover' => [
+            'transport' => 'failover',
+            'mailers' => [
+                'smtp',
+                'log',
+            ],
+            'retry_after' => 60,
+        ],
+
+        'roundrobin' => [
+            'transport' => 'roundrobin',
+            'mailers' => [
+                'ses',
+                'postmark',
+            ],
+            'retry_after' => 60,
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Global "From" Address
+    |--------------------------------------------------------------------------
+    |
+    | You may wish for all emails sent by your application to be sent from
+    | the same address. Here you may specify a name and address that is
+    | used globally for all emails that are sent by your application.
+    |
+    */
+
+    'from' => [
+        'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'),
+        'name' => env('MAIL_FROM_NAME', env('APP_NAME', 'Laravel')),
+    ],
+
+];

config/queue.php

@@ -0,0 +1,129 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Queue Connection Name
+    |--------------------------------------------------------------------------
+    |
+    | Laravel's queue supports a variety of backends via a single, unified
+    | API, giving you convenient access to each backend using identical
+    | syntax for each. The default queue connection is defined below.
+    |
+    */
+
+    'default' => env('QUEUE_CONNECTION', 'database'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Queue Connections
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure the connection options for every queue backend
+    | used by your application. An example configuration is provided for
+    | each backend supported by Laravel. You're also free to add more.
+    |
+    | Drivers: "sync", "database", "beanstalkd", "sqs", "redis",
+    |          "deferred", "background", "failover", "null"
+    |
+    */
+
+    'connections' => [
+
+        'sync' => [
+            'driver' => 'sync',
+        ],
+
+        'database' => [
+            'driver' => 'database',
+            'connection' => env('DB_QUEUE_CONNECTION'),
+            'table' => env('DB_QUEUE_TABLE', 'jobs'),
+            'queue' => env('DB_QUEUE', 'default'),
+            'retry_after' => (int) env('DB_QUEUE_RETRY_AFTER', 90),
+            'after_commit' => false,
+        ],
+
+        'beanstalkd' => [
+            'driver' => 'beanstalkd',
+            'host' => env('BEANSTALKD_QUEUE_HOST', 'localhost'),
+            'queue' => env('BEANSTALKD_QUEUE', 'default'),
+            'retry_after' => (int) env('BEANSTALKD_QUEUE_RETRY_AFTER', 90),
+            'block_for' => 0,
+            'after_commit' => false,
+        ],
+
+        'sqs' => [
+            'driver' => 'sqs',
+            'key' => env('AWS_ACCESS_KEY_ID'),
+            'secret' => env('AWS_SECRET_ACCESS_KEY'),
+            'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'),
+            'queue' => env('SQS_QUEUE', 'default'),
+            'suffix' => env('SQS_SUFFIX'),
+            'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+            'after_commit' => false,
+        ],
+
+        'redis' => [
+            'driver' => 'redis',
+            'connection' => env('REDIS_QUEUE_CONNECTION', 'default'),
+            'queue' => env('REDIS_QUEUE', 'default'),
+            'retry_after' => (int) env('REDIS_QUEUE_RETRY_AFTER', 90),
+            'block_for' => null,
+            'after_commit' => false,
+        ],
+
+        'deferred' => [
+            'driver' => 'deferred',
+        ],
+
+        'background' => [
+            'driver' => 'background',
+        ],
+
+        'failover' => [
+            'driver' => 'failover',
+            'connections' => [
+                'database',
+                'deferred',
+            ],
+        ],
+
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Job Batching
+    |--------------------------------------------------------------------------
+    |
+    | The following options configure the database and table that store job
+    | batching information. These options can be updated to any database
+    | connection and table which has been defined by your application.
+    |
+    */
+
+    'batching' => [
+        'database' => env('DB_CONNECTION', 'sqlite'),
+        'table' => 'job_batches',
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Failed Queue Jobs
+    |--------------------------------------------------------------------------
+    |
+    | These options configure the behavior of failed queue job logging so you
+    | can control how and where failed jobs are stored. Laravel ships with
+    | support for storing failed jobs in a simple file or in a database.
+    |
+    | Supported drivers: "database-uuids", "dynamodb", "file", "null"
+    |
+    */
+
+    'failed' => [
+        'driver' => env('QUEUE_FAILED_DRIVER', 'database-uuids'),
+        'database' => env('DB_CONNECTION', 'sqlite'),
+        'table' => 'failed_jobs',
+    ],
+
+];

config/services.php

@@ -0,0 +1,38 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Third Party Services
+    |--------------------------------------------------------------------------
+    |
+    | This file is for storing the credentials for third party services such
+    | as Mailgun, Postmark, AWS and more. This file provides the de facto
+    | location for this type of information, allowing packages to have
+    | a conventional file to locate the various service credentials.
+    |
+    */
+
+    'postmark' => [
+        'key' => env('POSTMARK_API_KEY'),
+    ],
+
+    'resend' => [
+        'key' => env('RESEND_API_KEY'),
+    ],
+
+    'ses' => [
+        'key' => env('AWS_ACCESS_KEY_ID'),
+        'secret' => env('AWS_SECRET_ACCESS_KEY'),
+        'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
+    ],
+
+    'slack' => [
+        'notifications' => [
+            'bot_user_oauth_token' => env('SLACK_BOT_USER_OAUTH_TOKEN'),
+            'channel' => env('SLACK_BOT_USER_DEFAULT_CHANNEL'),
+        ],
+    ],
+
+];

config/session.php

@@ -0,0 +1,233 @@
+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Session Driver
+    |--------------------------------------------------------------------------
+    |
+    | This option determines the default session driver that is utilized for
+    | incoming requests. Laravel supports a variety of storage options to
+    | persist session data. Database storage is a great default choice.
+    |
+    | Supported: "file", "cookie", "database", "memcached",
+    |            "redis", "dynamodb", "array"
+    |
+    */
+
+    'driver' => env('SESSION_DRIVER', 'database'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Lifetime
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify the number of minutes that you wish the session
+    | to be allowed to remain idle before it expires. If you want them
+    | to expire immediately when the browser is closed then you may
+    | indicate that via the expire_on_close configuration option.
+    |
+    */
+
+    'lifetime' => (int) env('SESSION_LIFETIME', 120),
+
+    'expire_on_close' => env('SESSION_EXPIRE_ON_CLOSE', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Encryption
+    |--------------------------------------------------------------------------
+    |
+    | This option allows you to easily specify that all of your session data
+    | should be encrypted before it's stored. All encryption is performed
+    | automatically by Laravel and you may use the session like normal.
+    |
+    */
+
+    'encrypt' => env('SESSION_ENCRYPT', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session File Location
+    |--------------------------------------------------------------------------
+    |
+    | When utilizing the "file" session driver, the session files are placed
+    | on disk. The default storage location is defined here; however, you
+    | are free to provide another location where they should be stored.
+    |
+    */
+
+    'files' => storage_path('framework/sessions'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Database Connection
+    |--------------------------------------------------------------------------
+    |
+    | When using the "database" or "redis" session drivers, you may specify a
+    | connection that should be used to manage these sessions. This should
+    | correspond to a connection in your database configuration options.
+    |
+    */
+
+    'connection' => env('SESSION_CONNECTION'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Database Table
+    |--------------------------------------------------------------------------
+    |
+    | When using the "database" session driver, you may specify the table to
+    | be used to store sessions. Of course, a sensible default is defined
+    | for you; however, you're welcome to change this to another table.
+    |
+    */
+
+    'table' => env('SESSION_TABLE', 'sessions'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cache Store
+    |--------------------------------------------------------------------------
+    |
+    | When using one of the framework's cache driven session backends, you may
+    | define the cache store which should be used to store the session data
+    | between requests. This must match one of your defined cache stores.
+    |
+    | Affects: "dynamodb", "memcached", "redis"
+    |
+    */
+
+    'store' => env('SESSION_STORE'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Sweeping Lottery
+    |--------------------------------------------------------------------------
+    |
+    | Some session drivers must manually sweep their storage location to get
+    | rid of old sessions from storage. Here are the chances that it will
+    | happen on a given request. By default, the odds are 2 out of 100.
+    |
+    */
+
+    'lottery' => [2, 100],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Name
+    |--------------------------------------------------------------------------
+    |
+    | Here you may change the name of the session cookie that is created by
+    | the framework. Typically, you should not need to change this value
+    | since doing so does not grant a meaningful security improvement.
+    |
+    */
+
+    'cookie' => env(
+        'SESSION_COOKIE',
+        Str::slug((string) env('APP_NAME', 'laravel')).'-session',
+    ),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Path
+    |--------------------------------------------------------------------------
+    |
+    | The session cookie path determines the path for which the cookie will
+    | be regarded as available. Typically, this will be the root path of
+    | your application, but you're free to change this when necessary.
+    |
+    */
+
+    'path' => env('SESSION_PATH', '/'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Cookie Domain
+    |--------------------------------------------------------------------------
+    |
+    | This value determines the domain and subdomains the session cookie is
+    | available to. By default, the cookie will be available to the root
+    | domain without subdomains. Typically, this shouldn't be changed.
+    |
+    */
+
+    'domain' => env('SESSION_DOMAIN'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | HTTPS Only Cookies
+    |--------------------------------------------------------------------------
+    |
+    | By setting this option to true, session cookies will only be sent back
+    | to the server if the browser has a HTTPS connection. This will keep
+    | the cookie from being sent to you when it can't be done securely.
+    |
+    */
+
+    'secure' => env('SESSION_SECURE_COOKIE'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | HTTP Access Only
+    |--------------------------------------------------------------------------
+    |
+    | Setting this value to true will prevent JavaScript from accessing the
+    | value of the cookie and the cookie will only be accessible through
+    | the HTTP protocol. It's unlikely you should disable this option.
+    |
+    */
+
+    'http_only' => env('SESSION_HTTP_ONLY', true),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Same-Site Cookies
+    |--------------------------------------------------------------------------
+    |
+    | This option determines how your cookies behave when cross-site requests
+    | take place, and can be used to mitigate CSRF attacks. By default, we
+    | will set this value to "lax" to permit secure cross-site requests.
+    |
+    | See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value
+    |
+    | Supported: "lax", "strict", "none", null
+    |
+    */
+
+    'same_site' => env('SESSION_SAME_SITE', 'lax'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Partitioned Cookies
+    |--------------------------------------------------------------------------
+    |
+    | Setting this value to true will tie the cookie to the top-level site for
+    | a cross-site context. Partitioned cookies are accepted by the browser
+    | when flagged "secure" and the Same-Site attribute is set to "none".
+    |
+    */
+
+    'partitioned' => env('SESSION_PARTITIONED_COOKIE', false),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Session Serialization
+    |--------------------------------------------------------------------------
+    |
+    | This value controls the serialization strategy for session data, which
+    | is JSON by default. Setting this to "php" allows the storage of PHP
+    | objects in the session but can make an application vulnerable to
+    | "gadget chain" serialization attacks if the APP_KEY is leaked.
+    |
+    | Supported: "json", "php"
+    |
+    */
+
+    'serialization' => 'json',
+
+];

database/.gitignore

@@ -0,0 +1 @@
+*.sqlite*

database/factories/UserFactory.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\User;
+use Illuminate\Database\Eloquent\Factories\Factory;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Str;
+
+/**
+ * @extends Factory<User>
+ */
+class UserFactory extends Factory
+{
+    /**
+     * The current password being used by the factory.
+     */
+    protected static ?string $password;
+
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        return [
+            'name' => fake()->name(),
+            'email' => fake()->unique()->safeEmail(),
+            'email_verified_at' => now(),
+            'password' => static::$password ??= Hash::make('password'),
+            'remember_token' => Str::random(10),
+            'two_factor_secret' => null,
+            'two_factor_recovery_codes' => null,
+            'two_factor_confirmed_at' => null,
+        ];
+    }
+
+    /**
+     * Indicate that the model's email address should be unverified.
+     */
+    public function unverified(): static
+    {
+        return $this->state(fn (array $attributes) => [
+            'email_verified_at' => null,
+        ]);
+    }
+
+    /**
+     * Indicate that the model has two-factor authentication configured.
+     */
+    public function withTwoFactor(): static
+    {
+        return $this->state(fn (array $attributes) => [
+            'two_factor_secret' => encrypt('secret'),
+            'two_factor_recovery_codes' => encrypt(json_encode(['recovery-code-1'])),
+            'two_factor_confirmed_at' => now(),
+        ]);
+    }
+}

database/migrations/0001_01_01_000000_create_users_table.php

@@ -0,0 +1,49 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('users', function (Blueprint $table) {
+            $table->id();
+            $table->string('name');
+            $table->string('email')->unique();
+            $table->timestamp('email_verified_at')->nullable();
+            $table->string('password');
+            $table->rememberToken();
+            $table->timestamps();
+        });
+
+        Schema::create('password_reset_tokens', function (Blueprint $table) {
+            $table->string('email')->primary();
+            $table->string('token');
+            $table->timestamp('created_at')->nullable();
+        });
+
+        Schema::create('sessions', function (Blueprint $table) {
+            $table->string('id')->primary();
+            $table->foreignId('user_id')->nullable()->index();
+            $table->string('ip_address', 45)->nullable();
+            $table->text('user_agent')->nullable();
+            $table->longText('payload');
+            $table->integer('last_activity')->index();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('users');
+        Schema::dropIfExists('password_reset_tokens');
+        Schema::dropIfExists('sessions');
+    }
+};

database/migrations/0001_01_01_000001_create_cache_table.php

@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('cache', function (Blueprint $table) {
+            $table->string('key')->primary();
+            $table->mediumText('value');
+            $table->bigInteger('expiration')->index();
+        });
+
+        Schema::create('cache_locks', function (Blueprint $table) {
+            $table->string('key')->primary();
+            $table->string('owner');
+            $table->bigInteger('expiration')->index();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('cache');
+        Schema::dropIfExists('cache_locks');
+    }
+};

database/migrations/0001_01_01_000002_create_jobs_table.php

@@ -0,0 +1,59 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('jobs', function (Blueprint $table) {
+            $table->id();
+            $table->string('queue')->index();
+            $table->longText('payload');
+            $table->unsignedSmallInteger('attempts');
+            $table->unsignedInteger('reserved_at')->nullable();
+            $table->unsignedInteger('available_at');
+            $table->unsignedInteger('created_at');
+        });
+
+        Schema::create('job_batches', function (Blueprint $table) {
+            $table->string('id')->primary();
+            $table->string('name');
+            $table->integer('total_jobs');
+            $table->integer('pending_jobs');
+            $table->integer('failed_jobs');
+            $table->longText('failed_job_ids');
+            $table->mediumText('options')->nullable();
+            $table->integer('cancelled_at')->nullable();
+            $table->integer('created_at');
+            $table->integer('finished_at')->nullable();
+        });
+
+        Schema::create('failed_jobs', function (Blueprint $table) {
+            $table->id();
+            $table->string('uuid')->unique();
+            $table->string('connection');
+            $table->string('queue');
+            $table->longText('payload');
+            $table->longText('exception');
+            $table->timestamp('failed_at')->useCurrent();
+
+            $table->index(['connection', 'queue', 'failed_at']);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('jobs');
+        Schema::dropIfExists('job_batches');
+        Schema::dropIfExists('failed_jobs');
+    }
+};

database/migrations/2024_01_01_000000_create_passkeys_table.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('passkeys', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('user_id')->constrained()->cascadeOnDelete();
+            $table->string('name');
+            $table->string('credential_id')->unique();
+            $table->json('credential');
+            $table->timestamp('last_used_at')->nullable();
+            $table->timestamps();
+
+            $table->index('user_id');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('passkeys');
+    }
+};

database/migrations/2025_08_14_170933_add_two_factor_columns_to_users_table.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->text('two_factor_secret')->after('password')->nullable();
+            $table->text('two_factor_recovery_codes')->after('two_factor_secret')->nullable();
+            $table->timestamp('two_factor_confirmed_at')->after('two_factor_recovery_codes')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn([
+                'two_factor_secret',
+                'two_factor_recovery_codes',
+                'two_factor_confirmed_at',
+            ]);
+        });
+    }
+};

database/seeders/DatabaseSeeder.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\User;
+// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+use Illuminate\Database\Seeder;
+
+class DatabaseSeeder extends Seeder
+{
+    /**
+     * Seed the application's database.
+     */
+    public function run(): void
+    {
+        // User::factory(10)->create();
+
+        User::factory()->create([
+            'name' => 'Test User',
+            'email' => 'test@example.com',
+        ]);
+    }
+}

docker-compose.yml

@@ -0,0 +1,70 @@
+services:
+    laravel.test:
+        build:
+            context: './vendor/laravel/sail/runtimes/8.4'
+            dockerfile: Dockerfile
+            args:
+                WWWGROUP: '${WWWGROUP:-20}'
+                WWWUSER: '${WWWUSER:-501}'
+        image: 'sail-8.4/app'
+        extra_hosts:
+            - 'host.docker.internal:host-gateway'
+        ports:
+            - '${VITE_PORT:-5179}:5179'
+        environment:
+            WWWUSER: '${WWWUSER:-501}'
+            WWWGROUP: '${WWWGROUP:-20}'
+            LARAVEL_SAIL: 1
+            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
+            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
+            IGNITION_LOCAL_SITES_PATH: '${PWD}'
+
+            # --- Anbindung an das Mutterschiff ---
+            DB_CONNECTION: mysql
+            DB_HOST: global-mysql
+            DB_PORT: 3306
+            # Hier definieren wir nur die Haupt-Datenbank für .env
+            # Die anderen beiden richtest du in Laravel ein
+            DB_DATABASE: markemacht
+            DB_USERNAME: root
+            DB_PASSWORD: password
+            MAIL_HOST: global-mailpit
+            MAIL_PORT: 1025
+            REDIS_HOST: global-redis
+        volumes:
+            - '.:/var/www/html'
+        networks:
+            - sail
+            - proxy
+        labels:
+            - "traefik.enable=true"
+            # Markemacht Domain
+            - "traefik.http.routers.markemacht.rule=Host(`markemacht.test`)"
+            - "traefik.http.routers.markemacht.entrypoints=websecure"
+            - "traefik.http.routers.markemacht.tls=true"
+            - "traefik.http.routers.markemacht.service=markemacht-service-prc"
+            # Brand Rules Domain
+            - "traefik.http.routers.brand-rules.rule=Host(`brand-rules.test`)"
+            - "traefik.http.routers.brand-rules.entrypoints=websecure"
+            - "traefik.http.routers.brand-rules.tls=true"
+            - "traefik.http.routers.brand-rules.service=brand-rules-service-prc"
+
+
+            # Asset-Domain für Vite-Dev-Server (Port 5178)
+            - "traefik.http.routers.assets-brand.rule=Host(`assets.brand-rules.test`)"
+            - "traefik.http.routers.assets-brand.entrypoints=websecure"
+            - "traefik.http.routers.assets-brand.tls=true"
+            - "traefik.http.routers.assets-brand.service=assets-brand-service-prc"
+
+            # Service-Definitionen
+            - "traefik.http.services.markemacht-service-prc.loadbalancer.server.port=80"
+            - "traefik.http.services.brand-rules-service-prc.loadbalancer.server.port=80"
+            - "traefik.http.services.assets-brand-service-prc.loadbalancer.server.port=5179"
+            - "traefik.http.services.assets-brand-service-prc.loadbalancer.server.scheme=http"
+            - "traefik.docker.network=proxy"
+
+networks:
+    sail:
+        driver: bridge
+    proxy:
+        external: true

docs/00_Methodik-Verfassung/Wissensdokument_000.md

@@ -0,0 +1,310 @@
+# Wissensdokument 000 — Version 2.0
+
+Was jetzt folgt, ist kein „Meta-Gelaber", sondern die **Verfassung** von *Marke macht.*
+
+Ohne dieses Dokument wären alle anderen nur gut gemeint.
+
+---
+
+## Meta-Governance der Wissensdokumente
+
+### Wie Klarheit geschützt, weiterentwickelt und entschieden wird
+
+**Status:** Fixiert
+
+**Version:** 2.0.2 (ersetzt 2.0.1)
+
+**Gültig ab:** sofort
+
+**Rolle:** Oberste Instanz für alle Wissensdokumente (001–999)
+
+---
+
+### Änderungsvermerk (gemäß §5.2)
+
+| Feld | Wert |
+| --- | --- |
+| Version | 1.0 → 2.0 (methodisch: Ownership getrennt in Autorenschaft vs. Anwendung) |
+| Datum | 27.05.2026 |
+| Begründung | §4.1 (1.0) erklärte die methodische Letztinstanz pauschal für „nicht delegierbar". Das stand in Spannung zum Skalierungs- und Exit-Versprechen (Dok. 008) und zur Partner-Anwendung (Dok. 009) und machte das Audit zum personengebundenen Flaschenhals. v2.0 trennt **Autorenschaft** (nicht delegierbar) von **Anwendung** (delegierbar). Gewählte Schärfe: **Option A** – maximale Delegation der Anwendung inkl. komplexer Audits an Tool + Partner; bewusster früher Kontrollverlust über die Ausführung zugunsten Skalierung/Exit. Ergänzt **Selbstanwendung** als Proof-of-Method und benennt die **Bootstrapping-Phase** mit explizitem Ausgang. |
+| Betroffene Dokumente | Dok. 000 §4 (Restrukturierung 4.1 → 4.1–4.5); löst latente Spannung zu Dok. 008 (Skalierung/Exit) und Dok. 009 (Partner-Anwendung); Anschluss an Dok. 011b §4.3 (Human-Gate beim Kunden-Owner) |
+| Entscheidung | Kevin Adametz (Letztinstanz, §4.1) |
+| Hinweis | Klassifikation als „methodisch" (v2.0) ist eine bewusste Setzung. Bei Lesart „Klarstellung" wäre v1.1 zulässig. |
+| v2.0.1 (27.05.2026) | Redaktionell: kanonische Schreibweisen in §7 ergänzt (Marken-Hygiene, kein Methodikeingriff). |
+| v2.0.2 (28.05.2026) | Redaktionell: Umbenennung Tool/Produkt von *brandwork.io* zu **Brand Rules** (Markenname) bzw. **brand-rules.com** (Domain). §7 entsprechend aktualisiert; Altschreibweise *brandwork.io* in die Liste unzulässiger Varianten verschoben. Kein Methodikeingriff. Betrifft alle nachgeordneten Dokumente einschließlich Synthese-, Markenwissen- und Implementierungsschicht. |
+
+---
+
+## 1. Zweck dieses Dokuments (warum es existiert)
+
+Dieses Dokument definiert:
+
+- **wer** Entscheidungen trifft
+- **wie** Wissen verändert werden darf
+- **was** bei Widersprüchen gilt
+- **welche Logik** über allen anderen Dokumenten steht
+
+> Ohne Meta-Governance ist jedes Regelwerk nur Meinung.
+
+Dok. 000 ist die **höchste Autorität** im System *Marke macht.*
+
+---
+
+## 2. Geltungsbereich
+
+Diese Meta-Governance gilt für:
+
+- alle Wissensdokumente (001–999)
+- alle Ableitungen daraus (Tool-Logik, Partnerhandbücher, Schulungen)
+- alle externen Darstellungen der Methode
+
+**Nicht betroffen:**
+
+- Kundeninhalte
+- individuelle Marken-DNA-Dokumente
+
+---
+
+## 3. Hierarchie der Wissensdokumente (entscheidend)
+
+Bei Konflikten gilt **immer** folgende Prioritätsreihenfolge:
+
+1. **Dok. 000 – Meta-Governance**
+2. **Dok. 001 – Harte Diagnose**
+3. **Dok. 002 – Struktur der Marken-DNA**
+4. **Dok. 003 – Prozess & Erstellung**
+5. **Dok. 004 – Marken-Agent & Systemlogik**
+6. **Dok. 005 – Einstiegsangebot**
+7. **Dok. 006 – Plattform-Narrativ**
+8. **Dok. 007 – LinkedIn-Argumentationssystem**
+9. **Dok. 008 – Produkt-Roadmap**
+10. **Dok. 009+ – Erweiterungen & Anwendungen**
+
+> Je näher ein Dokument an der Diagnose liegt, desto höher seine Autorität.
+
+---
+
+## 4. Entscheidungsinstanz (Ownership)
+
+Ownership trennt sich in **zwei Schichten**: **Autorenschaft** (was die Regeln *sind* – nicht delegierbar) und **Anwendung** (was mit den Regeln *getan* wird – delegierbar, mit dem erklärten Ziel der Personenunabhängigkeit). Diese Trennung ist die **Selbstanwendung der eigenen Methode**.
+
+---
+
+### 4.1 Autorenschaft & Verfassungshoheit (nicht delegierbar)
+
+**Kevin Adametz** ist:
+
+- methodischer Urheber
+- Verfasser und Hüter der Wissensdokumente (000–999)
+- letzte Instanz für die **Weiterentwicklung der Methode** und für **echte methodische Grenzfälle** (neue Logik, strukturelle Konflikte)
+
+Diese Rolle – *was die Regeln sind* – ist:
+
+- **nicht delegierbar**
+- **nicht abstimmungsfähig**
+- **nicht temporär**
+
+> Jede Methode hat einen Autor. Niemand erwartet, dass der Verfasser einer Verfassung austauschbar ist – sondern dass die Verfassung ohne ihn funktioniert.
+
+*Marke macht.* ist kein Open-Source-Modell. Die Methode ist offen nutzbar – aber nicht offen veränderbar.
+
+---
+
+### 4.2 Methodische Anwendung (delegierbar – mit Ziel der Entbehrlichkeit)
+
+Anwendung heißt: Audits durchführen, Inhalte validieren, DNA-Prozesse moderieren, Kunden ins System führen.
+
+> Anwendung muss ohne den Urheber funktionieren – sonst ist das Versprechen der Personenunabhängigkeit hohl.
+
+Anwendung wird – **auch in komplexen Fällen, einschließlich Audits** – über die Zeit **vollständig delegiert** an:
+
+1. **das System** (Brand Rules, Scorecard, DNA-Engine) – kodifizierte Urteilslogik
+2. **zertifizierte Partner** (Dok. 009/012) – unter Vertrag, ohne Methodenhoheit
+3. **den Marken-Owner des Kunden** – als finales Human-Gate für eigene Inhalte (Dok. 011b §4.3)
+
+**Erklärtes Ziel:** Kevin wird für die Anwendung entbehrlich. Die Qualitätssicherung der Ausführung liegt dann nicht mehr in seiner Einzelprüfung, sondern in der kodifizierten Regel (der Autorenschaft) und im System.
+
+**Bewusste Konsequenz (Option A):** Mit der Delegation auch komplexer Audits gibt der Urheber **früh** Kontrolle über die Ausführung ab. Das ist gewollt – zugunsten von Skalierung und Exit-Fähigkeit. Der Hebel der Qualität verschiebt sich:
+
+> von „Kevin prüft den Fall" zu „Kevin schreibt die Regel – das System prüft den Fall".
+
+---
+
+### 4.3 Selbstanwendung (Proof of Method)
+
+*Marke macht.* wendet seine eigene Skalierungslogik (Dok. 001 §8) auf sich selbst an: Der Denkprozess des Urhebers wird kodifiziert – in den Wissensdokumenten, der Scorecard und Brand Rules. Diese **sind** das ausgelagerte methodische Bewusstsein von *Marke macht.*
+
+> Die Personenunabhängigkeit, die wir verkaufen, vollziehen wir zuerst an uns selbst.
+
+Das ist kein Eingeständnis einer Schwäche, sondern der Beweis der Methode.
+
+---
+
+### 4.4 Bootstrapping-Phase (ehrlich benannt)
+
+Solange weder zertifizierte Partner noch ein reifes Tool existieren, ist die Anwendung faktisch personengebunden (an Kevin). Das ist ein normaler Gründungszustand – aber eine **Phase, kein Dauerzustand**.
+
+Ausgang der Phase:
+
+- Partner-Zertifizierung (Dok. 009)
+- Reife von Scorecard und DNA-Engine (Dok. 011/011b)
+- → Übergang an Tool + Partner gemäß §4.2
+
+---
+
+### 4.5 Operative Mitwirkung (Mitwirkung ≠ Autorenschaft)
+
+Partner, Mitarbeiter oder Agenten dürfen:
+
+- Feedback geben
+- Widersprüche melden
+- Erweiterungen vorschlagen
+- die Methode **anwenden** (sofern zertifiziert)
+
+Sie dürfen **nicht**:
+
+- Dokumente eigenständig ändern
+- Begriffe neu definieren
+- bestehende Logik relativieren
+
+> Anwendung wird geteilt. Autorenschaft nicht.
+
+---
+
+## 5. Änderungslogik (Versionierung)
+
+### 5.1 Arten von Änderungen
+
+| Typ | Beschreibung | Version |
+| --- | --- | --- |
+| Redaktionell | Klarstellung, Sprache | +0.0.1 |
+| Strukturell | Reihenfolge, Ergänzung | +0.1 |
+| Methodisch | neue Logik, neue Regeln | +1.0 |
+
+### 5.2 Dokumentationspflicht
+
+Jede Änderung erfordert:
+
+- Versionsnummer
+- Änderungsdatum
+- Begründung (1–3 Sätze)
+- Referenz auf betroffene Dokumente
+
+> Keine stille Evolution. Nur bewusste Entscheidung.
+
+---
+
+## 6. Umgang mit Widersprüchen (sehr wichtig)
+
+### 6.1 Arten von Widersprüchen
+
+1. **Logische Widersprüche** (z. B. zwei gegensätzliche Aussagen)
+2. **Anwendungswidersprüche** (Theorie funktioniert nicht in der Praxis)
+3. **Interpretationswidersprüche** (unterschiedliches Verständnis)
+
+### 6.2 Vorgehen bei Widersprüchen
+
+1. Widerspruch wird **benannt**
+2. Betroffene Dokumente werden referenziert
+3. Priorität laut Hierarchie entscheidet
+4. Niederrangiges Dokument wird angepasst
+5. Änderung wird versioniert
+
+> Diskussion endet, wo Hierarchie beginnt.
+
+---
+
+## 7. Schutz vor Verwässerung
+
+Folgende Dinge sind **nicht erlaubt**:
+
+- alternative Begriffsdefinitionen
+- Vereinfachungen für Marketingzwecke
+- „Übersetzungen" der Methode ohne Freigabe
+- externe White-Label-Versionen
+
+Warum:
+
+> Klarheit stirbt nicht durch Kritik, sondern durch Verwässerung.
+
+**Kanonische Schreibweisen (verbindlich):**
+
+- **Marke macht.** (mit Schlusspunkt)
+- **Brand Rules** (Tool/Produkt; zwei Wörter, beide großgeschrieben) · **brand-rules.com** (Domain; klein, mit Bindestrich, mit `.com`)
+- **markemacht.de**
+- **adametz.media**
+
+Varianten wie *BrandRules*, *Brand-Rules*, *brandrules*, *brand rules* (klein) sowie die Altschreibweisen *brandwork.io*, *BrandWorks*, *Brandwork* sind unzulässig.
+
+---
+
+## 8. Verhältnis von Theorie und Praxis
+
+Grundsatz:
+
+> Praxis validiert Theorie. Aber Praxis überschreibt sie nicht.
+
+Wenn Praxis widerspricht:
+
+- wird die Theorie überprüft
+- nicht sofort geändert
+
+Systemfehler ≠ Anwenderfehler.
+
+---
+
+## 9. Veröffentlichung & Zugriff
+
+### Intern
+
+- vollständiger Zugriff auf alle Dokumente
+- Änderungsverlauf sichtbar
+
+### Extern
+
+- nur freigegebene Auszüge
+- keine vollständige Methodik
+- keine Governance-Dokumente
+
+> Nicht alles, was existiert, wird erklärt.
+
+---
+
+## 10. Erweiterungen des Systems
+
+Neue Wissensdokumente dürfen entstehen, wenn:
+
+- sie eine klare Lücke schließen
+- sie nicht bestehende Dokumente duplizieren
+- sie der Diagnose (001) nicht widersprechen
+
+Nummerierung erfolgt: fortlaufend, logisch, nicht marketinggetrieben.
+
+---
+
+## 11. Gültigkeit & Revision
+
+Dieses Dokument gilt:
+
+- bis es **bewusst** geändert wird
+- nicht implizit
+- nicht stillschweigend
+
+Geplante Revision: jährlich oder bei grundlegender Systemänderung.
+
+---
+
+## 12. Essenz (nicht verhandelbar)
+
+- Klarheit braucht Hierarchie
+- Hierarchie braucht Verantwortung
+- Verantwortung ist nicht demokratisch
+- Autorenschaft bleibt. Anwendung skaliert.
+
+> Marke macht. Weil jemand entscheidet.
+
+---
+
+### Ende – Wissensdokument 000 (Version 2.0)
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_001.md

@@ -0,0 +1,245 @@
+# Wissensdokument 001 — Version 2.0
+
+Nicht Marketing-Text, nicht Pitch, sondern ein **internes Wissensdokument**, auf dem alles Weitere logisch aufbaut: Tool, Kommunikation, LinkedIn, Produkt, Preise.
+
+Das hier ist **Dokument 001**. Es ist **nicht für Kunden**, sondern für dich, dein System und später dein Team.
+
+---
+
+## Die Kernstrategie von „Marke macht."
+
+### Fundament für Methode, Tool und Kommunikation
+
+**Status:** Fixiert
+
+**Version:** 2.0 (ersetzt 1.0)
+
+**Zweck:** Strategischer Nordstern für alle weiteren Entscheidungen
+
+---
+
+### Änderungsvermerk (gemäß Dok. 000 §5.2)
+
+| Feld | Wert |
+| --- | --- |
+| Version | 1.0 → 2.0 (methodisch: Geltungsbereich der Kernthese + Präzisierung der Definition) |
+| Datum | 27.05.2026 |
+| Begründung | (1) Die zentrale These wurde in 1.0 als universell behauptet. v2.0 führt einen Geltungsbereich ein, modelliert als **Spektrum der Erklärungslast** (Treiber: Einsatz, Neuheit, Wechselreibung) mit zweiter Achse **Verhärtung der Gewohnheit** – statt einer Kategorien-Binärlogik (FMCG vs. B2B). Der Challenger-Fall ist als Brücke zwischen den Polen definiert: Klarheit liefert den Auslöser, nicht den Reichweitenmotor. (2) Die Definition „sich erklären" wurde als **multimodal** präzisiert (Wort als primärer, Bild als zweiter Register) und gegen bloße **Wiedererkennung** abgegrenzt – behebt die Kollision mit dem Keyvisual-Briefing durch Absorption statt Streichung. Absorbiert die Sharp-Auflösung aus der MW-Serie ins Fundament. |
+| Betroffene Dokumente | Dok. 001 (neue Sektion 3, Renummerierung 3→4 ff.); inhaltlicher Anschluss an Dok. 010 (Referenzfälle = Verständniskauf) |
+| Entscheidung | Kevin Adametz (Letztinstanz, Dok. 000 §4.1) |
+| Hinweis | Klassifikation als „methodisch" (v2.0) ist eine bewusste Setzung. Bei Lesart „Klarstellung" wäre v1.1 zulässig. |
+
+---
+
+## 1. Ausgangspunkt (Die harte Realität)
+
+Der deutsche Mittelstand leidet **nicht** an schlechten Produkten, fehlender Qualität oder mangelndem Know-how. Er leidet an einem strukturellen Defizit:
+
+> Unternehmen sind wirtschaftlich leistungsfähig, aber sprachlich handlungsunfähig.
+
+Das bedeutet konkret:
+
+- Sie können nicht klar erklären, wofür sie stehen
+- Sie können nicht konsistent kommunizieren
+- Sie können Entscheidungen nicht sprachlich absichern
+- Sie sind abhängig von Personen (Agenturen, einzelne Mitarbeiter)
+- Ihr Markenwissen ist nicht dokumentiert, nicht vererbbar, nicht nutzbar
+
+Marketing, Werbung und KI verschärfen dieses Problem, weil sie **Ausdruck verlangen, bevor Klarheit existiert**.
+
+---
+
+## 2. Die zentrale These (Nicht verhandelbar – innerhalb ihres Geltungsbereichs, siehe Abschnitt 3)
+
+> Marke ist kein Design- oder Marketingthema. Marke ist die Fähigkeit eines Unternehmens, sich selbst eindeutig zu erklären.
+
+Daraus folgt:
+
+- Ohne sprachliche Klarheit keine Identität
+- Ohne Identität keine Marke
+- Ohne Marke nur Vergleichbarkeit
+- Vergleichbarkeit führt immer zum Preis
+
+**Marke ist damit kein Kommunikationskanal, sondern ein Führungsinstrument.**
+
+### Was „sich erklären" heißt (multimodal)
+
+Selbst-Erklärung ist nicht auf das Wort beschränkt. Sie läuft über alle Ausdrucksebenen – Wort, Bild, Form, Verhalten. Das Wort ist der **primäre Register**: am schwersten, am meisten vernachlässigt, und Wirbelsäule des Ganzen – ein Unternehmen, das sich nicht in Worte fassen kann, lässt sich auch nicht konsistent ins Bild fassen. Das Bild ist ein **zweiter Register** derselben Fähigkeit: Ein Keyvisual wie der Monolith *erklärt* die Marke visuell – er macht das Markenversprechen sichtbar (siehe Keyvisual-Briefing). „Sprachliche Handlungsfähigkeit" bleibt die Signatur, weil sie der Engpass ist; gemeint ist aber die Fähigkeit, sich über alle Register hinweg eindeutig verständlich zu machen.
+
+### Erklären ist nicht Wiedererkennen (Grenze)
+
+Eine Grenze, die scharf bleiben muss: **sich erklären** (Bedeutung vermitteln – wer, was, warum) ist etwas anderes als **wiedererkannt werden** (auffallen, erinnert werden – Distinctiveness, reines Signal). Das Bild leistet beides. Eine rote Dose mit weißer Schrift ist maximal wiedererkennbar, ohne irgendetwas zu erklären. Der Monolith dagegen trägt Bedeutung – er ist ein visuelles Argument, kein bloßes Erkennungszeichen. Nur die **bedeutungstragende** Funktion des Visuellen fällt unter Selbst-Erklärung. Die reine Wiedererkennungs-Funktion gehört in die Salienz- und Verfügbarkeitslogik (Sharp), die in Abschnitt 3 abgegrenzt ist.
+
+---
+
+## 3. Geltungsbereich der These (das Spektrum der Erklärungslast)
+
+Diese These gilt nicht für jede Marke und jeden Kauf. Ihre Grenze hängt aber **nicht an der Produktkategorie** (FMCG vs. B2B), sondern am **Entscheidungsmoment**. Die entscheidende Variable ist die Erklärungslast:
+
+> Wie viel muss ein Käufer verstehen, bevor er handelt?
+
+Diese Last ist ein Spektrum, kein Schalter. Sie steigt mit drei Treibern – **Einsatz/Risiko**, **Neuheit/Unvertrautheit**, **Wechselreibung** – und verändert sich innerhalb derselben Kategorie je nach Situation. Eine zweite Achse verschärft das Bild: **wie verhärtet die Gewohnheit des Käufers ist.** Wer längst gewählt hat, denkt nicht nach. Wer noch nicht gewählt hat, ist offen.
+
+**Pol A – Verständniskauf (hohe Erklärungslast, offene Entscheidung).**
+Komplexe, erklärungsbedürftige Leistungen · hohe Investition · lange Wege · große Folgen bei Fehlentscheidung. B2B, Mittelstand, Spezialanbieter. Hier trägt Klarheit die *gesamte* Entscheidung. Hier ist die Methode das ganze Spiel.
+
+**Pol B – Gewohnheitskauf (geringe Erklärungslast, verhärtete Entscheidung).**
+Häufige, geringwertige Käufe · geringe Folgen · Entscheidung über Verfügbarkeit und Wiedererkennung statt Argument. Der etablierte FMCG-Platzhirsch. Hier zeigt die Empirie (Sharp, Ehrenberg-Bass): Differenzierung ist überschätzt, Käufer sind polygam, es entscheiden Verfügbarkeit und Distinctiveness. Wir widersprechen dem nicht. Wir grenzen uns ab.
+
+### Der Challenger – die Brücke zwischen den Polen
+
+Im selben Regal spielen zwei Anbieter zwei entgegengesetzte Spiele. Der Platzhirsch spielt Pol B: Präsenz und Wiedererkennung, fertig. Der kleine Herausforderer (Naturdeo ohne Zusatzstoffe, deutsche Manufaktur) spielt das Gegenteil – er muss eine Gewohnheit **unterbrechen**. Für ihn springt die Erklärungslast in genau einem Moment nach oben: dem Erstkauf. Neuheit und Wechsel treiben sie. Dort wird die scharfe Formulierung zum Türöffner.
+
+Hier die Disziplin, die vor dem Universalitätsfehler bewahrt:
+
+> Klarheit ist im Challenger-Fall der Auslöser für den Erstkauf – nicht der Motor für Reichweite.
+
+Die klarste Botschaft liegt tot im Regal, wenn niemand das Produkt kennt und findet. Der Challenger reitet zwingend auf **Distinctiveness + physischer Verfügbarkeit + einer Penetrationsmaschine**, die unsere Methode **nicht liefert**. Holy ist der Beweis: Das ungewöhnliche Design und das simple Versprechen waren die Klarheit, die *konvertiert* hat – aber der Motor war die Penetration über Social und Influencer. Klarheit hat die Reichweite verwertbar gemacht. Sie hat sie nicht erzeugt.
+
+**Wen der Challenger anspricht:** nie den loyalen Kern des Platzhirschs. Sondern die mit **unverhärteter Gewohnheit** – die, die *noch nicht* gewählt haben (Erstwähler *bilden* eine Gewohnheit, statt eine zu brechen; das ist ungleich billiger), und die, die *ohnehin* wechseln (leichte, wechselbereite Käufer; Menschen in Lebensumbrüchen). „Jung" ist dabei nur ein Proxy für „unverhärtet", nicht die Ursache.
+
+### Polarisierung – Mechanismus und Klinge
+
+Das ungewöhnliche, polarisierende Auftreten (True Fruits, Holy, MORE) macht zwei Jobs zugleich: Es ist **Distinctiveness** (auffallen, erinnert werden) **und** es *ist* der **Reichweitenmotor** (polarisierend = teilbar = algorithmisch belohnt). Polarisierung ist damit die Brücke zwischen Klarheit (Auslöser) und Penetration (Motor).
+
+Aber Polarisierung ist eine Klinge. Hohe Varianz: Sie verschafft Durchbruch gegen Übermacht – und sie deckelt zugleich die Reichweite (ein Teil lehnt aktiv ab) und ist einen Fehltritt von Markenschaden entfernt (True Fruits, als Provokation in Beleidigung kippte).
+
+> Der Mechanismus, der hier gewinnt, ist derselbe, der am dringendsten Grenzen braucht.
+
+Das ist kein Zufall. Es ist die Daseinsberechtigung der Grenzregeln (Dok. 002/004) und der Scorecard (Dok. 011). Genau dieser Challenger-Typ braucht Brand Rules am meisten – nicht um polarisierender zu werden, sondern um nicht über die eigene Klinge zu fallen: **Grenzen, kein Gas.**
+
+### Operative Konsequenz
+
+- **Reiner Verständniskauf** → Die Methode ist das ganze Spiel.
+- **Reiner Gewohnheitskauf (Platzhirsch)** → Nicht unser Kunde.
+- **Challenger** → Die Methode ist eine hochwertige *Komponente*: Sie liefert den Auslöser (Klarheit) und den Schutz (Grenzen) – nicht den Motor (Reichweite). Wir koppeln, wir ersetzen nicht. Und wir sagen das offen.
+
+> Wir behaupten nicht, alle Marken funktionierten über Sprache.
+> Wir sagen, wo Sprache die Entscheidung trägt, wo sie nur den ersten Moment trägt – und wo sie schweigt.
+
+Dieser Geltungsbereich ist zugleich ein Filter und ein Trust-Asset: Wer ehrlich sagt, wo seine Methode wirkt und wo nicht, gewinnt genau die Glaubwürdigkeit, die der Markt sonst niemandem glaubt.
+
+---
+
+## 4. Die eigentliche Ursache (Root Cause)
+
+Das Kernproblem ist **nicht fehlende Kreativität**, sondern fehlende Struktur.
+
+In den meisten Unternehmen existiert Markenwissen:
+
+- implizit (in Köpfen)
+- fragmentiert (über Abteilungen verteilt)
+- widersprüchlich (je nach Person)
+- flüchtig (geht mit Mitarbeitern/Agenturen)
+
+Es gibt **keinen zentralen Ort**, an dem definiert ist: wie das Unternehmen spricht, was es niemals sagt, wofür es steht, wovon es sich klar abgrenzt, welche Argumentationslogik gilt.
+
+> Eine Marke, die nicht strukturiert existiert, kann nicht geführt werden.
+
+---
+
+## 5. Die strategische Konsequenz
+
+Wenn Marke ein Strukturproblem ist, dann kann sie **nicht** durch einzelne Maßnahmen gelöst werden:
+
+- nicht durch ein neues Logo
+- nicht durch eine neue Website
+- nicht durch Social-Media-Posts
+- nicht durch ein einzelnes KI-Tool
+
+Die Lösung muss **systemisch** sein.
+
+> Strategie ohne Infrastruktur verpufft. Infrastruktur ohne Strategie ist leer.
+
+---
+
+## 6. Der Lösungsansatz: Brand Engineering
+
+„Marke macht." basiert auf einem ingenieurhaften Verständnis von Marke:
+
+> Marke ist ein System aus Regeln, Entscheidungen und Grenzen, das dauerhaft handlungsfähig macht.
+
+Brand Engineering bedeutet:
+
+- Marke wird **gebaut**, nicht „entwickelt"
+- Marke wird **dokumentiert**, nicht „gefühlt"
+- Marke wird **gespeichert**, nicht erklärt
+- Marke wird **nutzbar**, nicht präsentiert
+
+Das Ziel ist **nicht** Kommunikation, sondern **Kontrolle über Bedeutung**.
+
+---
+
+## 7. Die drei Säulen der Umsetzung (fix)
+
+Die Strategie materialisiert sich in drei klar getrennten, aber verbundenen Ebenen.
+
+### 7.1 markemacht.de – Der Denkrahmen
+
+Funktion: Aufklärung · Diagnose · Einordnung.
+Ziel: Unternehmen erkennen ihr Klarheitsproblem; Sprache für das Problem entsteht; Marke wird als Führungs- und Machtinstrument verstanden. markemacht.de verkauft **keine Leistungen**, sondern **ein neues Verständnis von Marke**.
+
+### 7.2 Brand Rules – Die Infrastruktur
+
+Funktion: Speicherung von Marken-DNA · Übersetzung von Strategie in operative Nutzung · Sicherstellung von Konsistenz. Brand Rules (brand-rules.com) ist **kein KI-Texttool**, sondern:
+
+> Das ausgelagerte Markenbewusstsein eines Unternehmens.
+
+Es sorgt dafür, dass Markenwissen nicht verloren geht, Teams selbstständig markengerecht arbeiten, KI regelbasiert statt generisch arbeitet und Kommunikation reproduzierbar und kontrollierbar wird.
+
+### 7.3 adametz.media – Die Autorität
+
+Funktion: Persönliche Expertise · Strategische Begleitung · Initiale Marken-DNA-Erstellung. Die Rolle von Kevin Adametz: Übersetzer zwischen Unternehmen und System, Garant für methodische Qualität, Instanz für komplexe oder kritische Markenentscheidungen. adametz.media ist **kein Agenturauftritt**, sondern die **Quelle der Methode**.
+
+---
+
+## 8. Die Skalierungslogik (entscheidend)
+
+Skalierung bedeutet **nicht**, den Menschen zu ersetzen. Skalierung bedeutet:
+
+> Den Denkprozess zu kodifizieren.
+
+- Einmal Klarheit herstellen (mit Expertise)
+- Klarheit in Struktur überführen
+- Struktur dauerhaft nutzbar machen
+- Kunden befähigen, selbstständig zu handeln
+
+Brand Rules ist das Werkzeug, aber **nicht der Ursprung** der Klarheit.
+
+---
+
+## 9. Abgrenzung (klar und bewusst)
+
+„Marke macht." ist **nicht**: eine klassische Marketing-Agentur, ein Content-Studio, ein KI-Spielzeug, ein Social-Media-Tool.
+
+„Marke macht." ist:
+
+> Ein System zur Herstellung, Sicherung und Nutzung von unternehmerischer Klarheit.
+
+---
+
+## 10. Der Maßstab für alle Entscheidungen
+
+Jede zukünftige Entscheidung (Feature, Content, Angebot, Partnerschaft) muss diese Frage bestehen:
+
+> Erhöht das die sprachliche Handlungsfähigkeit des Unternehmens – oder nicht?
+
+Wenn nein: kein Feature, kein Post, kein Angebot.
+
+---
+
+## 11. Zusammenfassung des Kerns (unverrückbar)
+
+- Marke = sprachliche Handlungsfähigkeit
+- Klarheit schlägt Kreativität
+- Struktur schlägt Maßnahmen
+- Infrastruktur schlägt Aktionismus
+- Kontrolle schlägt Lautstärke
+
+> Marke macht. Weil Klarheit Macht ist.
+
+---
+
+### Ende – Wissensdokument 001 (Version 2.0)
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_002.md

@@ -0,0 +1,243 @@
+# Wissensdokument 002 — Version 1.1
+
+Es ist das **entscheidende Scharnier** zwischen Strategie und Tool. Alles, was danach kommt (UI, Agent, Pricing, LinkedIn, Partner), hängt davon ab.
+
+---
+
+## Die minimale Marken-DNA-Struktur
+
+### Die kleinste handlungsfähige Einheit von Marke
+
+**Status:** Fixiert
+
+**Version:** 1.1 (ersetzt 1.0)
+
+**Zweck:** Einheitliche Struktur zur Erfassung, Speicherung und operativen Nutzung von Marke
+
+**Gültig für:** markemacht.de · Brand Rules (brand-rules.com) · adametz.media
+
+---
+
+### Änderungsvermerk (gemäß Dok. 000 §5.2)
+
+| Feld | Wert |
+| --- | --- |
+| Version | 1.0 → 1.1 (redaktionell/strukturell) |
+| Datum | 27.05.2026 |
+| Begründung | Die Regel in §3.3 verlangte „alles muss negativ definierbar sein". Als Absolutum falsch: legitime positive Regeln („Zahlen vor Emotionen") werden in den Referenzfällen (Dok. 010) selbst genutzt. Der wahre Kern ist **Prüfbarkeit**, nicht Negativformulierung. |
+| Betroffene Dokumente | Dok. 002 §3.3, Anschluss an Dok. 011b (Reifegrad-Check „Anteil prüfbarer Regeln") |
+| Entscheidung | Kevin Adametz (Letztinstanz, Dok. 000 §4.1) |
+
+---
+
+## 1. Grundannahme (nicht verhandelbar)
+
+> Eine Marke ist nur dann real, wenn sie in Abwesenheit des Markeneigentümers konsistent handeln kann.
+
+Daraus folgt:
+
+- Alles, was nicht dokumentiert ist, existiert nicht.
+- Alles, was nicht strukturiert ist, ist nicht nutzbar.
+- Alles, was nicht begrenzt ist, verwässert.
+
+Die Marken-DNA ist **kein Leitbild**, kein Manifest, kein Text. Sie ist ein **operatives Regelwerk**.
+
+---
+
+## 2. Designprinzip der Marken-DNA
+
+Die Struktur muss:
+
+- **vollständig** sein (keine relevanten Lücken)
+- **reduziert** sein (keine Überforderung)
+- **entscheidungsfähig** sein (klar ja / klar nein)
+- **toolfähig** sein (maschinenlesbar, nicht poetisch)
+
+> Wenn ein Element nicht zu einer klaren Entscheidung führt, fliegt es raus.
+
+---
+
+## 3. Die fünf Bausteine der minimalen Marken-DNA
+
+Die Marken-DNA besteht aus **fünf** Bausteinen. Nicht mehr. Nicht weniger.
+
+---
+
+### 3.1 BAUSTEIN 1: IDENTITÄTSKERN
+
+**„Wer sind wir – jenseits von Produkten?"**
+
+**Zweck:** Schafft innere Konsistenz und Orientierung.
+
+**Definition:** Der Identitätskern beschreibt die **innere Logik** des Unternehmens – nicht das Angebot.
+
+**Bestandteile (fix):**
+
+- Selbstverständnis (1–2 Sätze)
+- Haltung (woran wir glauben / woran nicht)
+- Motivation (warum wir tun, was wir tun – ohne Pathos)
+
+**Regel:**
+
+- Keine Marktbegriffe
+- Keine Kundenargumente
+- Keine Nutzenversprechen
+
+**Testfrage:**
+
+> Würde dieser Kern auch gelten, wenn sich Produkte, Märkte oder Technologien ändern?
+
+---
+
+### 3.2 BAUSTEIN 2: POSITIONIERUNGSLOGIK
+
+**„Warum wir – und nicht die anderen?"**
+
+**Zweck:** Verhindert Vergleichbarkeit.
+
+**Definition:** Nicht *was* wir besser machen, sondern **nach welcher Logik** wir anders sind.
+
+**Bestandteile (fix):**
+
+- Relevantes Problem (aus Sicht des Kunden)
+- Unsere Lösungslogik (wie wir grundsätzlich denken/handeln)
+- Klare Abgrenzung (was wir bewusst nicht tun)
+
+**Wichtig:** Keine Superlative. Keine Features. Keine Behauptungen ohne Logik.
+
+**Regel:**
+
+> Positionierung ist Ausschluss, nicht Anpreisung.
+
+---
+
+### 3.3 BAUSTEIN 3: SPRACH- & TONALITÄTSREGELN
+
+**„Wie sprechen wir – und wie niemals?"**
+
+**Zweck:** Macht Kommunikation reproduzierbar.
+
+**Definition:** Ein explizites Regelwerk für Sprache, Ton und Argumentation.
+
+**Bestandteile (fix):**
+
+- Sprachmodus (z. B. sachlich, direkt, technisch, nüchtern)
+- Do's (z. B. kurze Sätze, aktive Sprache, konkrete Beispiele)
+- Don'ts (z. B. Buzzwords, Übertreibungen, Phrasen)
+- Argumentationsstil (Zahlen, Logik, Erfahrung, Beweis)
+
+**Regel:**
+
+> Jede Regel muss **prüfbar** sein – es muss erkennbar sein, was ihr widerspricht. Das gelingt oft über explizite Don'ts, kann aber auch eine positive Regel mit klarer Verletzungsbedingung sein (z. B. „Zahlen vor Emotionen" → Verletzung: Emotionalisierung ohne Zahl).
+
+Test: Wenn man nicht sagen kann, *was die Regel verletzt*, ist sie zu weich.
+
+---
+
+### 3.4 BAUSTEIN 4: THEMEN- & RELEVANZRAHMEN
+
+**„Worüber sprechen wir – und worüber bewusst nicht?"**
+
+**Zweck:** Fokussiert Kommunikation und verhindert Beliebigkeit.
+
+**Definition:** Ein klarer Themenkorridor, der bestimmt, was markenkonform ist.
+
+**Bestandteile (fix):**
+
+- Kern-Themen (max. 3)
+- Unterstützende Themen (optional)
+- Tabu-Themen (klar benannt)
+- Perspektive auf Themen (z. B. kritisch, pragmatisch, erklärend)
+
+**Regel:**
+
+> Eine starke Marke spricht über wenig – aber konsequent.
+
+---
+
+### 3.5 BAUSTEIN 5: ENTSCHEIDUNGS- & GRENZREGELN
+
+**„Was darf diese Marke niemals tun?"**
+
+**Zweck:** Schützt die Marke vor Verwässerung – intern wie extern.
+
+**Definition:** Explizite Grenzen für Verhalten, Aussagen und Auftritte.
+
+**Bestandteile (fix):**
+
+- No-Go-Claims (z. B. Marktführer, garantiert, einzigartig)
+- No-Go-Formate (z. B. Trends, Memes, Rabatt-Sprache)
+- No-Go-Haltungen (z. B. Anpassung um jeden Preis)
+- Kritische Prüfregeln („Wenn X zutrifft, dann Y nicht tun")
+
+**Regel:**
+
+> Grenzen sind wichtiger als Botschaften.
+
+---
+
+## 4. Warum genau diese fünf Bausteine
+
+Jeder Baustein beantwortet **eine operative Frage**:
+
+| Baustein | Antwortet auf |
+| --- | --- |
+| Identitätskern | „Aus welcher Haltung handeln wir?" |
+| Positionierung | „Warum wir – logisch, nicht emotional?" |
+| Sprache & Ton | „Wie klingt diese Marke immer?" |
+| Themenrahmen | „Worüber dürfen wir sprechen?" |
+| Entscheidungsregeln | „Was ist strikt verboten?" |
+
+Wenn alle fünf beantwortet sind, kann KI markengerecht arbeiten, können Mitarbeiter selbstständig kommunizieren, kann Konsistenz überprüft werden.
+
+---
+
+## 5. Überführung in Brand Rules (entscheidend)
+
+Diese Struktur ist **1:1 toolfähig**. Jeder Baustein wird strukturiert erfasst (keine freien Essays), versioniert und für Generierung **und** Validierung genutzt.
+
+Das Tool fragt nicht:
+
+> „Schreib einen Post."
+
+Sondern:
+
+> „Ist dieser Post konform mit DNA v1.2?"
+
+---
+
+## 6. Zeit- & Komplexitätsversprechen
+
+- Erfassungszeit: **60–90 Minuten**
+- Verständlich für: Geschäftsführer, Marketing, Vertrieb
+- Wartbar: Ja
+- Erweiterbar: Ja (aber nicht verpflichtend)
+
+Alles Weitere (Archetypen, Narrative, Kampagnen) ist **Add-on**, kein Fundament.
+
+---
+
+## 7. Maßstab für Erweiterungen
+
+Neue Felder, Features oder Daten dürfen **nur** ergänzt werden, wenn sie:
+
+> eine bestehende Entscheidung schneller, klarer oder sicherer machen.
+
+Alles andere bleibt draußen.
+
+---
+
+## 8. Zusammenfassung (Essenz)
+
+- Marke ist ein Regelwerk
+- Regeln müssen explizit und prüfbar sein
+- Fünf Bausteine reichen
+- Alles darüber ist Kür
+
+> Ohne Struktur keine Klarheit. Ohne Klarheit keine Marktmacht.
+
+---
+
+### Ende – Wissensdokument 002 (Version 1.1)
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_003.md

@@ -0,0 +1,258 @@
+# Wissensdokument 003
+
+Es beantwortet eine einzige Frage:
+
+> Wie entsteht diese Marken-DNA reproduzierbar –ohne Kreativ-Show, ohne Workshop-Zirkus, ohne Abhängigkeit von dir?
+> 
+
+---
+
+## Der Prozess zur Erstellung der Marken-DNA
+
+### Von implizitem Wissen zu operativer Klarheit
+
+**Status:** Fixiert
+
+**Version:** 1.0
+
+**Zweck:** Reproduzierbarer Prozess zur Erstellung der Marken-DNA
+
+**Anwendung:** Beratung · Tool-Onboarding · Partner-Setup
+
+---
+
+## 1. Grundprinzip des Prozesses
+
+> Marken-DNA wird nicht erfunden,sie wird freigelegt, strukturiert und fixiert.
+> 
+
+Der Prozess ist:
+
+- **diagnostisch**, nicht kreativ
+- **entscheidungsorientiert**, nicht diskursiv
+- **reduktiv**, nicht additiv
+
+Ziel ist **nicht Inspiration**, sondern **Eindeutigkeit**.
+
+---
+
+## 2. Rolle der Beteiligten (klar getrennt)
+
+### 2.1 Unternehmen (Kunde)
+
+- Liefert Realität
+- Trifft Entscheidungen
+- Verantwortet Inhalte
+
+### 2.2 System / Methode
+
+- Stellt die richtigen Fragen
+- Erzwingt Klarheit
+- Verhindert Ausweichantworten
+
+### 2.3 Experte (Kevin Adametz / zertifizierte Partner)
+
+- Moderiert Entscheidungen
+- Übersetzt implizites Wissen in Struktur
+- Stoppt Widersprüche
+
+> Der Experte denkt nicht für den Kunden –er zwingt ihn, selbst klar zu denken.
+> 
+
+---
+
+## 3. Prozess-Überblick (High Level)
+
+Der Prozess besteht aus **vier Phasen**:
+
+1. Vorbereitung (Realität sammeln)
+2. Diagnose (Widersprüche sichtbar machen)
+3. Entscheidung (DNA fixieren)
+4. Validierung (Praxistest)
+
+Kein Workshop-Marathon.
+
+Kein „Lasst uns mal brainstormen“.
+
+---
+
+## 4. Phase 1: Vorbereitung – Realität statt Wunschbild
+
+**Ziel:**
+
+Das Unternehmen so zeigen, **wie es tatsächlich kommuniziert**, nicht wie es sein möchte.
+
+**Input (verpflichtend):**
+
+- Bestehende Website
+- 5–10 reale Texte (Mail, Angebot, Post, Präsentation)
+- 3 typische Kundenfragen
+- 3 typische Einwände
+- Beschreibung der wichtigsten Zielgruppe(n)
+
+**Wichtig:**
+
+Kein Neuschreiben. Keine Optimierung. Nur Ist-Zustand.
+
+> Marken-DNA beginnt mit Ehrlichkeit.
+> 
+
+---
+
+## 5. Phase 2: Diagnose – Widersprüche offenlegen
+
+**Ziel:**
+
+Sprachliche Unklarheit sichtbar machen.
+
+**Typische Diagnosefragen:**
+
+- Wo widersprechen sich Aussagen?
+- Wo wird ausweichend formuliert?
+- Wo werden Begriffe benutzt, die niemand definiert?
+- Wo klingt alles wie „alle anderen“?
+
+**Ergebnis:**
+
+- Klar identifizierte Unschärfen
+- Erste Ausschlüsse („Das sind wir definitiv nicht“)
+
+> Klarheit entsteht zuerst durch Nein, nicht durch Ja.
+> 
+
+---
+
+## 6. Phase 3: Entscheidung – Die fünf Bausteine fixieren
+
+Jetzt wird **nicht mehr diskutiert**, sondern entschieden.
+
+Die fünf Bausteine aus Wissensdokument 002 werden **nacheinander** fixiert – in genau dieser Reihenfolge:
+
+1. Identitätskern
+2. Positionierungslogik
+3. Sprach- & Tonalitätsregeln
+4. Themen- & Relevanzrahmen
+5. Entscheidungs- & Grenzregeln
+
+### Wichtige Regel:
+
+- Jeder Baustein wird **finalisiert**, bevor der nächste beginnt.
+- Keine Rücksprünge.
+- Keine „wir überlegen das später“.
+
+> Unentschiedenheit ist der größte Markenfehler.
+> 
+
+---
+
+## 7. Phase 4: Validierung – Realitätstest
+
+**Ziel:**
+
+Beweisen, dass die DNA funktioniert.
+
+**Validierungsschritte:**
+
+- Generierung von 2–3 realen Texten (z. B. LinkedIn-Post, Angebotsabsatz)
+- Abgleich mit:
+    - Identitätskern
+    - Tonalitätsregeln
+    - Entscheidungsgrenzen
+
+**Leitfrage:**
+
+> „Würden wir diesen Text unterschreiben – auch in fünf Jahren?“
+> 
+
+Wenn nein:
+
+- DNA nachschärfen
+- nicht den Text
+
+---
+
+## 8. Ergebnis des Prozesses (klar definiert)
+
+Am Ende existiert:
+
+- **Eine versionierte Marken-DNA (v1.0)**
+- Verständlich für:
+    - Geschäftsführung
+    - Marketing
+    - Vertrieb
+- Nutzbar für:
+    - Menschen
+    - KI-Systeme
+    - Onboarding
+- Unabhängig von:
+    - einzelnen Personen
+    - Agenturen
+    - Tools
+
+> Die Marke ist erstmals besitzbar.
+> 
+
+---
+
+## 9. Überführung in Brand Rules
+
+Nach Abschluss des Prozesses wird die DNA:
+
+- strukturiert im Tool hinterlegt
+- versioniert
+- gegen Veränderungen abgesichert
+
+Ab jetzt gilt:
+
+> Kein Inhalt ohne DNA-Referenz.
+> 
+
+---
+
+## 10. Skalierungslogik des Prozesses
+
+Der Prozess ist:
+
+- manuell moderierbar (High-End-Beratung)
+- teilautomatisierbar (Tool-gestützt)
+- partnerfähig (zertifizierte Durchführung)
+
+Skalierung entsteht durch:
+
+- Standardisierung der Fragen
+- Klarheit der Struktur
+- nicht durch Geschwindigkeit
+
+---
+
+## 11. Abgrenzung (bewusst)
+
+Dieser Prozess ist **kein**:
+
+- Kreativworkshop
+- Leitbildprozess
+- Agentur-Briefing
+- Marketing-Meeting
+
+Er ist:
+
+> Ein unternehmerischer Klärungsprozess.
+> 
+
+---
+
+## 12. Zusammenfassung (Essenz)
+
+- Klarheit entsteht durch Entscheidung
+- Entscheidungen brauchen Struktur
+- Struktur schlägt Kreativität
+- Validierung schlägt Bauchgefühl
+
+> Eine Marke wird nicht entwickelt.Sie wird festgelegt.
+> 
+
+---
+
+### Ende – Wissensdokument 003
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_004.md

@@ -0,0 +1,300 @@
+# Wissensdokument 004
+
+Jetzt kommen wir an den Punkt, an dem **Strategie zu Systemlogik** wird.
+
+Es ist das Dokument, das entscheidet, ob Brand Rules ein **ernstzunehmendes Marken-Betriebssystem** wird – oder nur ein weiteres KI-Tool.
+
+---
+
+## Der Marken-Agent
+
+### Wie die Marken-DNA operativ genutzt wird
+
+*(Generieren, Prüfen, Absichern)*
+
+**Status:** Fixiert
+
+**Version:** 1.0
+
+**Zweck:** Definition der Funktionslogik des Marken-Agenten
+
+**Anwendung:** Brand Rules · Produktdesign · Agent-Architektur
+
+---
+
+## 1. Grundannahme (nicht verhandelbar)
+
+> KI darf keine Marke erfinden.KI darf nur innerhalb klar definierter Grenzen handeln.
+> 
+
+Der Marken-Agent ist **kein Kreativpartner**,
+
+sondern ein **exekutives System**.
+
+Seine Aufgabe ist:
+
+- Markenlogik anzuwenden
+- Konsistenz sicherzustellen
+- Fehlentscheidungen zu verhindern
+
+Nicht:
+
+- zu inspirieren
+- zu überraschen
+- zu provozieren um jeden Preis
+
+---
+
+## 2. Die Rolle des Marken-Agenten (klar definiert)
+
+Der Marken-Agent ist:
+
+> Die operative Verlängerung der Marken-DNA.
+> 
+
+Er übernimmt Aufgaben, die bisher:
+
+- implizit
+- personenabhängig
+- fehleranfällig
+
+waren.
+
+Er ersetzt **nicht** den Menschen,
+
+sondern **entlastet ihn von Wiederholungsentscheidungen**.
+
+---
+
+## 3. Die drei Kernfunktionen des Marken-Agenten
+
+Der Agent hat **drei klar getrennte Funktionsmodi**.
+
+Diese Trennung ist essenziell.
+
+---
+
+### 3.1 FUNKTION 1: GENERIEREN
+
+**„Erzeuge markenkonforme Inhalte.“**
+
+**Zweck:**
+
+Produktive Umsetzung der Marken-DNA.
+
+**Was der Agent darf:**
+
+- Inhalte formulieren
+- Strukturen vorschlagen
+- Tonalität einhalten
+- Themen korrekt einordnen
+
+**Was der Agent nicht darf:**
+
+- neue Markenpositionen ableiten
+- Aussagen erfinden
+- Regeln überschreiben
+
+**Input:**
+
+- Marken-DNA (Version X)
+- Content-Typ (z. B. LinkedIn, Website, Angebot)
+- Thema / Ziel
+
+**Output:**
+
+- Entwurf (nicht „finale Wahrheit“)
+
+> Der Agent schreibt nie „die Marke“.Er schreibt für die Marke.
+> 
+
+---
+
+### 3.2 FUNKTION 2: PRÜFEN (DER WICHTIGSTE TEIL)
+
+**„Ist dieser Inhalt markenkonform?“**
+
+**Zweck:**
+
+Verhindert Markenverwässerung.
+
+Diese Funktion ist **wichtiger als Generierung**.
+
+**Der Agent prüft:**
+
+- Tonalität (Do’s / Don’ts)
+- Themenrahmen (erlaubt / tabu)
+- Entscheidungsgrenzen (No-Gos)
+- Positionierungslogik (passt / passt nicht)
+
+**Ergebnis ist immer eines von drei Zuständen:**
+
+1. **Konform** → freigabefähig
+2. **Teilweise konform** → konkrete Hinweise
+3. **Nicht konform** → klare Begründung
+
+**Regel:**
+
+Der Agent **bewertet**, aber **entscheidet nicht endgültig**.
+
+> Der Agent ist der Marken-TÜV.Nicht der Marken-Chef.
+> 
+
+---
+
+### 3.3 FUNKTION 3: ABSICHERN
+
+**„Schütze die Marke vor Fehlentwicklungen.“**
+
+**Zweck:**
+
+Langfristige Markenkonsistenz.
+
+**Absicherungsmechanismen:**
+
+- Verbotene Begriffe / Claims
+- Format-No-Gos
+- Haltungs-Grenzen
+- Branchen-/Rechts-Constraints (optional)
+
+**Wenn eine Grenze verletzt wird:**
+
+- kein stilles Umschreiben
+- kein Halluzinieren
+
+Sondern:
+
+> „Dieser Inhalt verstößt gegen Regel X der Marken-DNA.
+> 
+> 
+> Möchten Sie die DNA anpassen – oder den Inhalt ändern?“
+> 
+
+**Wichtig:**
+
+Die DNA ist **höher priorisiert** als jeder Inhalt.
+
+---
+
+## 4. Die Entscheidungslogik des Agenten (Prioritäten)
+
+Wenn Regeln kollidieren, gilt folgende Hierarchie:
+
+1. **Entscheidungs- & Grenzregeln**
+2. **Identitätskern**
+3. **Positionierungslogik**
+4. **Sprach- & Tonalitätsregeln**
+5. **Themenrahmen**
+
+> Grenzen schlagen Botschaften.Haltung schlägt Kreativität.
+> 
+
+---
+
+## 5. Kein autonomes Lernen – bewusste Weiterentwicklung
+
+Der Marken-Agent **lernt nicht selbstständig**.
+
+Er wird **weiterentwickelt**.
+
+### Was als Lernsignal gilt:
+
+- Nutzer-Edits (bewusst)
+- explizite Freigaben
+- DNA-Versionierungen
+
+### Was **kein** Lernsignal ist:
+
+- Likes
+- Reichweite
+- Trends
+- Algorithmen-Hypes
+
+> Markenführung ist kein Optimierungsproblem,sondern ein Führungsproblem.
+> 
+
+---
+
+## 6. Versionierung & Verantwortung
+
+Jede Marken-DNA ist:
+
+- versioniert
+- datiert
+- verantwortet
+
+**Grundsatz:**
+
+- Inhalte referenzieren immer eine DNA-Version
+- Änderungen an der DNA sind sichtbar
+- Alte Inhalte bleiben erklärbar
+
+> Markenänderungen sind bewusste Entscheidungen –keine Nebenwirkungen.
+> 
+
+---
+
+## 7. Abgrenzung zu klassischen KI-Tools
+
+Der Marken-Agent ist **kein**:
+
+- Prompt-Interface
+- Chatbot
+- Kreativspielplatz
+
+Er ist:
+
+> Ein regelbasiertes Markensystem mit KI-Unterstützung.
+> 
+
+Die KI ist **Mittel**, nicht Zweck.
+
+---
+
+## 8. Produktlogische Konsequenzen für Brand Rules
+
+Daraus ergeben sich zwingend:
+
+- Trennung von „Erstellen“ und „Freigeben“
+- Sichtbare Regelreferenzen („Warum wurde das abgelehnt?“)
+- Audit-Log („Wer hat was wann geändert?“)
+- Rollen & Rechte (Owner / Editor / Viewer)
+
+Ohne diese Elemente:
+
+- kein Vertrauen
+- keine Skalierung
+- kein Mittelstand
+
+---
+
+## 9. Der eigentliche Wertversprechen (intern)
+
+Brand Rules verspricht **nicht**:
+
+- mehr Reichweite
+- virale Posts
+- kreative Höhenflüge
+
+Sondern:
+
+> Markenkonsistenz ohne Abhängigkeit von Einzelpersonen.
+> 
+
+---
+
+## 10. Zusammenfassung (Essenz)
+
+- Der Agent generiert innerhalb von Regeln
+- Er prüft strenger, als er schreibt
+- Er schützt die Marke vor sich selbst
+- Er ersetzt keine Entscheidung – er erzwingt sie
+
+> Der Marken-Agent ist kein Autor.Er ist ein Wächter.
+> 
+
+---
+
+### Ende – Wissensdokument 004
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_005.md

@@ -0,0 +1,192 @@
+# Wissensdokument 005 — Version 1.1
+
+Es ist das **Übersetzungsstück zwischen System und Markt**. Ohne dieses Dokument bleibt alles davor theoretisch.
+
+---
+
+## Das Einstiegsangebot
+
+### Der Weg von Unsicherheit zu sprachlicher Handlungsfähigkeit
+
+**Status:** Fixiert
+
+**Version:** 1.1 (ersetzt 1.0)
+
+**Zweck:** Klar definierter Markteintritt in das System „Marke macht."
+
+**Ziel:** Vertrauen aufbauen, Klarheit schaffen, Grundlage für Skalierung legen
+
+---
+
+### Änderungsvermerk (gemäß Dok. 000 §5.2)
+
+| Feld | Wert |
+| --- | --- |
+| Version | 1.0 → 1.1 (strukturell) |
+| Datum | 27.05.2026 |
+| Begründung | Nach Dok. 013 ist das Audit nicht mehr der einzige Eingang. Es gibt zwei Pfade zur DNA: geführter Self-Service (Tool) und Audit (Premium, menschliches Handwerk). Neue Sektion 8a repositioniert das Audit als Premium-Pfad – phasenehrlich (Self-Service wächst mit Tool-Reife; das Audit bleibt heute primärer Eingang, Anhang 007 v1.1, Dok. 000 §4.4). |
+| Betroffene Dokumente | Dok. 013, Anhang 007 v1.1, Dok. 000 §4.4, Dok. 012 v2.0 |
+| Entscheidung | Kevin Adametz (Letztinstanz, Dok. 000 §4.1) |
+
+---
+
+## 1. Grundproblem am Markt (Realität)
+
+Unternehmen wissen: „Wir müssen an unserer Marke arbeiten." Aber sie wissen **nicht**: wo sie anfangen sollen, wem sie vertrauen können, wie viel Aufwand realistisch ist, ob sich das Ergebnis lohnt.
+
+Deshalb scheitern klassische Einstiege: Workshops (zu abstrakt), Retainer (zu vage), Tools (zu früh).
+
+> Der Markt braucht keinen großen Wurf. Er braucht einen klaren ersten Schritt.
+
+---
+
+## 2. Funktion des Einstiegsangebots (strategisch)
+
+Das Einstiegsangebot hat **eine einzige Aufgabe**:
+
+> Beweisen, dass Klarheit möglich ist – und dass sie einen Unterschied macht.
+
+Nicht: alles lösen, alles erklären, alles automatisieren. Sondern: das Kernproblem sichtbar machen, eine Entscheidung erzwingen, Vertrauen in die Methode aufbauen.
+
+---
+
+## 3. Name des Einstiegsangebots (funktional, nicht kreativ)
+
+**Arbeitsname (empfohlen):**
+
+> Marken-Klarheits-Audit
+
+Alternativen (gleichwertig): Marken-DNA-Check · Marken-Klarheits-Setup · Sprachliche Standortbestimmung.
+
+Wichtig: Kein „Workshop", kein „Beratungsgespräch", kein „Strategie-Call".
+
+---
+
+## 4. Ziel des Marken-Klarheits-Audits
+
+Nach Abschluss des Audits gilt: Das Unternehmen **kann sich erklären**, Widersprüche sind sichtbar, eine erste belastbare Marken-DNA existiert, Entscheidungen sind dokumentiert, die Abhängigkeit von Einzelpersonen beginnt zu sinken.
+
+> Das Unternehmen ist erstmals sprachlich handlungsfähig.
+
+---
+
+## 5. Umfang & Ergebnis (glasklar definiert)
+
+### Enthalten (fix)
+
+1. **Analyse des Ist-Zustands** – Sprache, Positionierung, Widersprüche, Austauschbarkeit
+2. **Erstellung der Marken-DNA v1.0** – alle fünf Bausteine aus Dok. 002, dokumentiert, versioniert
+3. **Validierung** – 2–3 reale Textanwendungen, Abgleich mit DNA
+4. **Handlungsempfehlung** – Was jetzt tun, was lassen, was priorisieren
+
+### Nicht enthalten (bewusst)
+
+Kampagnen · Design · Content-Produktion · Tool-Zwang · Retainer.
+
+> Das Audit verkauft keine Leistung. Es verkauft Klarheit.
+
+---
+
+## 6. Zeit, Ablauf, Erwartungsmanagement
+
+**Dauer:** 7–10 Tage gesamt · 1 strukturierter Termin (90 Minuten) · asynchrone Vor- und Nachbereitung.
+
+**Ablauf:** Vorbereitung (Ist-Material) → Diagnosetermin → Strukturierung & Fixierung → Validierung → Übergabe.
+
+Keine Workshops. Keine Gruppen. Keine Endlos-Schleifen.
+
+---
+
+## 7. Preislogik (bewusst klar)
+
+**Preisspanne (empfohlen):** 2.500 – 5.000 € (abhängig von Unternehmensgröße / Komplexität).
+
+**Warum dieser Preis funktioniert:** unter Agenturretainer, über Tool-Spielerei, ernsthaft, aber kein Risiko-Invest.
+
+> Wer diesen Schritt nicht gehen will, ist nicht bereit für Marke.
+
+(Detaillierte Preislogik: Dok. 012.)
+
+---
+
+## 8. Die drei Anschlusswege (entscheidend)
+
+Nach dem Audit gibt es **drei legitime Wege**:
+
+### Weg A: Eigenständig weiterarbeiten
+
+Nutzung der Marken-DNA intern · optional: späteres Tool-Onboarding.
+
+### Weg B: System-Nutzung (Brand Rules)
+
+Marken-DNA wird operative Infrastruktur · Teams arbeiten selbstständig · Konsistenz wird abgesichert.
+
+### Weg C: Begleitung (adametz.media)
+
+Strategische Weiterentwicklung · komplexe Fälle · High-End-Markenführung.
+
+> Das Audit zwingt zu keiner Entscheidung – aber es macht jede Entscheidung fundiert.
+
+---
+
+## 8a. Das Audit als Premium-Pfad (Verhältnis zum Self-Service)
+
+Mit Dok. 013 gibt es **zwei Pfade** zu einer Marken-DNA:
+
+- **Self-Service-DNA (Tool, geführt):** für Unternehmen mit eigener Markensubstanz und geringer Komplexität. Das Tool erzwingt die Entscheidungen, der Kunde liefert das Urteil. Skaliert ohne menschliche Zeit.
+- **Marken-Klarheits-Audit (Premium):** für komplexe, mehrstimmige oder widersprüchliche Fälle – und für alle, die das Handwerk eines Menschen wollen. Wertanker: „Hier arbeitet ein echter Mensch, kein Algorithmus."
+
+Das Audit ist damit **nicht mehr der einzige Eingang**, sondern die **Premium-Ausfahrt** neben dem Self-Service. Das Routing erfolgt **pro Baustein** (Dok. 013 §8), nicht pro Person: Wer das meiste selbst kann, braucht den Menschen nur für die Bausteine, die er nicht scharf bekommt.
+
+**Phasenhinweis:** Solange das Tool nicht reif ist (Anhang 007 v1.1; Dok. 000 §4.4), bleibt das Audit der **primäre** Eingang. Der Self-Service-Pfad wächst mit der Tool-Reife hinzu. Diese Repositionierung beschreibt den Zielzustand, nicht den Tagesstand.
+
+> Klarheit bleibt der Einstieg. Nur gibt es künftig zwei Wege hinein.
+
+---
+
+## 9. Rolle von LinkedIn & markemacht.de im Einstieg
+
+LinkedIn: Diagnose sichtbar machen, typische Widersprüche zeigen, Sprache für das Problem liefern.
+
+markemacht.de: Denkrahmen erklären, Methode einordnen, Audit logisch herleiten.
+
+Kein Hard-Selling. Keine Funnel-Spielchen.
+
+> Wer sich wiedererkennt, meldet sich.
+
+---
+
+## 10. Abgrenzung (nach außen klar kommunizieren)
+
+Das Marken-Klarheits-Audit ist **kein**: Branding-Projekt, Logo-Redesign, Marketing-Quick-Fix, Kreativprozess.
+
+Es ist:
+
+> Ein unternehmerischer Klärungsschritt.
+
+---
+
+## 11. Erfolgskriterium (intern)
+
+Das Audit ist erfolgreich, wenn der Kunde sagt:
+
+> „So klar war uns das noch nie."
+
+Nicht: „Schön formuliert", „Gefällt mir", „Klingt gut".
+
+---
+
+## 12. Zusammenfassung (Essenz)
+
+- Klarheit ist der Einstieg
+- Klarheit ist verkaufbar
+- Klarheit ist skalierbar
+- Klarheit ist die Voraussetzung für alles Weitere
+
+> Ohne Klarheit kein System. Ohne System keine Marktmacht.
+
+---
+
+### Ende – Wissensdokument 005 (Version 1.1)
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_006.md

@@ -0,0 +1,324 @@
+# Wissensdokument 006
+
+Es definiert **was markemacht.de ist – und was bewusst nicht**.
+
+Kein Design, kein SEO-Plan, sondern **Narrativ + Seitenlogik**.
+
+---
+
+## markemacht.de – Narrativ & Inhaltsarchitektur
+
+### Der Denkraum für unternehmerische Klarheit
+
+**Status:** Fixiert
+
+**Version:** 1.0
+
+**Zweck:** Inhaltliche und strukturelle Leitplanken für markemacht.de
+
+**Rolle im System:** Einstieg · Orientierung · Autoritätsaufbau
+
+---
+
+## 1. Grundfunktion von markemacht.de
+
+markemacht.de ist **kein Marketingkanal**.
+
+markemacht.de ist:
+
+> Ein Denkraum, in dem Unternehmer erkennen,warum ihr Unternehmen erklärungsbedürftig ist –und warum Marketing dieses Problem nicht löst.
+> 
+
+Die Seite verkauft:
+
+- **keine Leistungen**
+- **keine Pakete**
+- **keine Tools**
+
+Sie verkauft:
+
+- **Einsicht**
+- **Klarheit**
+- **Vertrauen in die Methode**
+
+---
+
+## 2. Zentrale Leitidee (unverrückbar)
+
+> Marke macht.Aber nur, wenn sie erklärbar ist.
+> 
+
+Alles auf markemacht.de dient dazu, **diese Erkenntnis** zu erzeugen.
+
+Nicht mehr.
+
+Nicht weniger.
+
+---
+
+## 3. Die Rolle der Seite im Gesamtsystem
+
+markemacht.de ist:
+
+- **vor** adametz.media
+- **vor** Brand Rules
+- **vor** jeder Kaufentscheidung
+
+Sie ist die **gedankliche Vorbereitung**.
+
+> Wer hier nicht zustimmt,ist kein Kunde – egal wie groß das Budget ist.
+> 
+
+---
+
+## 4. Die dramaturgische Logik der Seite
+
+Die Seite folgt **keinem Funnel**, sondern einer **Argumentationskette**.
+
+Diese Kette besteht aus **fünf Denkstufen**:
+
+1. Irritation
+2. Diagnose
+3. Einordnung
+4. Lösungssystem
+5. Nächster Schritt
+
+---
+
+## 5. Die fünf Kernbereiche von markemacht.de
+
+### 5.1 Startseite – Die Irritation
+
+**Ziel:**
+
+Den Besucher **aus seinem bisherigen Denkrahmen lösen**.
+
+**Funktion:**
+
+- Konfrontation mit der Diagnose
+- Keine Erklärung, keine Beruhigung
+
+**Zentrale Botschaft:**
+
+> „Wenn Sie Ihr Unternehmen nicht erklären können,
+> 
+> 
+> haben Sie kein Marketingproblem – sondern ein Markenproblem.“
+> 
+
+**Kein:**
+
+- Leistungsüberblick
+- Agentursprech
+- Call-to-Action-Geschrei
+
+Ein einziger klarer nächster Schritt:
+
+> „Warum Marke kein Marketingthema ist“
+> 
+
+---
+
+### 5.2 Das Manifest – Die Diagnose
+
+**Ziel:**
+
+Das Problem **sprachlich präzise benennen**.
+
+**Inhalt:**
+
+- Warum Produkte nicht mehr gewinnen
+- Warum Vergleichbarkeit entsteht
+- Warum Marketing scheitert
+- Warum KI das Problem verschärft
+
+**Ton:**
+
+- ruhig
+- sachlich
+- nicht missionarisch
+
+**Ergebnis:**
+
+Der Leser denkt:
+
+> „Das beschreibt unsere Situation erschreckend genau.“
+> 
+
+---
+
+### 5.3 Die Methode – Die Einordnung
+
+**Ziel:**
+
+Verstehen, **warum Brand Engineering notwendig ist**.
+
+**Inhalt:**
+
+- Marke als Strukturproblem
+- Warum Klarheit vor Kommunikation kommt
+- Warum Regeln wichtiger sind als Kampagnen
+- Warum Infrastruktur notwendig ist
+
+**Wichtig:**
+
+- Keine Tool-Demos
+- Keine Prozessgrafiken
+- Keine Features
+
+Nur:
+
+> Denklogik
+> 
+
+---
+
+### 5.4 Das System – Die Lösung
+
+**Ziel:**
+
+Zeigen, dass die Lösung **existiert und umsetzbar ist**.
+
+**Inhaltlich erlaubt:**
+
+- Erklärung der drei Säulen
+    - Denkrahmen (markemacht.de)
+    - Infrastruktur (Brand Rules)
+    - Autorität (adametz.media)
+
+**Nicht erlaubt:**
+
+- Preislisten
+- Feature-Vergleiche
+- Produktversprechen
+
+**Kernbotschaft:**
+
+> „Klarheit lässt sich bauen –
+> 
+> 
+> wenn man sie ernst nimmt.“
+> 
+
+---
+
+### 5.5 Der nächste Schritt – Die Entscheidung
+
+**Ziel:**
+
+Einen **einzigen, logischen Einstieg** anbieten.
+
+**Erlaubter CTA:**
+
+- Marken-Klarheits-Audit
+
+**Nicht:**
+
+- Newsletter-Zwang
+- Whitepaper-Flut
+- Kontaktformulare ohne Kontext
+
+> Wer bereit ist, Klarheit zu schaffen,weiß, was er hier zu tun hat.
+> 
+
+---
+
+## 6. Content-Regeln für alle Inhalte
+
+Jeder Artikel, jeder Text, jede Seite muss folgende Fragen bestehen:
+
+1. **Benennen wir ein echtes Problem – oder beschreiben wir Symptome?**
+2. **Zwingen wir zu einer Entscheidung – oder lassen wir alles offen?**
+3. **Reduzieren wir Komplexität – oder erzeugen wir neue?**
+4. **Ist die Aussage auch ohne Kontext klar?**
+5. **Würde ein Geschäftsführer das weiterleiten?**
+
+Wenn eine Frage mit *Nein* beantwortet wird:
+
+- Inhalt streichen oder überarbeiten
+
+---
+
+## 7. Rolle von LinkedIn-Inhalten auf markemacht.de
+
+LinkedIn ist:
+
+- Impuls
+- Reibung
+- Diskussionsraum
+
+markemacht.de ist:
+
+- Ordnung
+- Einordnung
+- Verdichtung
+
+**Regel:**
+
+- LinkedIn-Posts dürfen importiert werden
+- aber **nur**, wenn sie:
+    - verdichtet
+    - kontextualisiert
+    - geschärft werden
+
+> markemacht.de ist kein Archiv.
+> 
+> 
+> Es ist ein Destillat.
+> 
+
+---
+
+## 8. Sprachliche Leitplanken
+
+- Keine Buzzwords
+- Keine Motivationssprache
+- Keine „Wir helfen Ihnen“-Formulierungen
+- Kein Überzeugen-Wollen
+
+Stattdessen:
+
+- Feststellungen
+- Konsequenzen
+- logische Ableitungen
+
+> Wir erklären nicht, warum wir gut sind.Wir erklären, warum das Problem existiert.
+> 
+
+---
+
+## 9. Erfolgskriterium von markemacht.de
+
+markemacht.de ist erfolgreich, wenn:
+
+- Besucher **weniger** fragen
+- Anfragen **konkreter** werden
+- Kunden bereits Klarheit mitbringen
+- Diskussionen auf LinkedIn referenzieren:
+    
+    > „Das habe ich bei Marke macht gelesen …“
+    > 
+
+Nicht:
+
+- hohe Verweildauer
+- viele Seitenaufrufe
+- Likes
+
+---
+
+## 10. Zusammenfassung (Essenz)
+
+- markemacht.de ist kein Marketingkanal
+- markemacht.de ist ein Denkraum
+- Die Seite filtert – bewusst
+- Nur Klarheitsbereite bleiben
+
+> Marke macht.Aber nur, wenn man bereit ist, sie festzulegen.
+> 
+
+---
+
+### Ende – Wissensdokument 006
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_007.md

@@ -0,0 +1,316 @@
+# Wissensdokument 007
+
+Es definiert **wie du auf LinkedIn denkst, sprichst und wirkst**, ohne in Personal-Branding-Mechaniken zu rutschen.
+
+---
+
+## Das LinkedIn-Argumentationssystem
+
+### „Marke macht.“ als öffentlicher Denkrahmen
+
+**Status:** Fixiert
+
+**Version:** 1.0
+
+**Zweck:** Klare Leitplanken für LinkedIn-Kommunikation
+
+**Rolle im System:** Sichtbarkeit · Reibung · Autoritätsaufbau
+
+---
+
+## 1. Grundannahme (entscheidend)
+
+LinkedIn ist **kein Content-Kanal**.
+
+LinkedIn ist ein **öffentlicher Denkraum**.
+
+> Wer auf LinkedIn nur sendet, verliert.Wer Denken sichtbar macht, gewinnt.
+> 
+
+Die Aufgabe von LinkedIn im System „Marke macht.“ ist **nicht Reichweite**, sondern **Rahmensetzung**.
+
+---
+
+## 2. Die Rolle deiner Person auf LinkedIn
+
+Du trittst **nicht** auf als:
+
+- Coach
+- Berater
+- Motivator
+- Content Creator
+
+Du trittst auf als:
+
+> Architekt eines Denkmodells.
+> 
+
+Deine Person ist:
+
+- Träger der Haltung
+- Garant für Klarheit
+- Referenzpunkt für Diskussion
+
+Nicht:
+
+- Mittelpunkt der Aufmerksamkeit
+- Held der Geschichte
+
+---
+
+## 3. Zentrales Ziel der LinkedIn-Kommunikation
+
+> Unternehmer sollen beginnen, ihre eigenen Aussagen zu hinterfragen.
+> 
+
+Nicht:
+
+- dich zu bewundern
+- dir zuzustimmen
+- deine Leistungen zu buchen
+
+Sondern:
+
+- ihr eigenes Denken zu überprüfen
+
+> Wenn sie dir widersprechen, hast du gewonnen.
+> 
+
+---
+
+## 4. Die drei Ebenen der LinkedIn-Kommunikation
+
+Jeder Post gehört **immer genau einer Ebene** an.
+
+Nie mehreren gleichzeitig.
+
+---
+
+### 4.1 EBENE 1: DIAGNOSE
+
+**„Benennen, was andere übersehen.“**
+
+**Zweck:**
+
+Irritation und Wiedererkennung erzeugen.
+
+**Typische Aussagen:**
+
+- „Das ist kein Marketingproblem.“
+- „Das scheitert nicht an Sichtbarkeit.“
+- „KI ist nicht das Problem – Unklarheit schon.“
+
+**Regel:**
+
+- Keine Lösungen anbieten
+- Keine Tipps geben
+- Nur benennen
+
+> Diagnose schlägt Mehrwert.
+> 
+
+---
+
+### 4.2 EBENE 2: EINORDNUNG
+
+**„Warum das Problem existiert.“**
+
+**Zweck:**
+
+Den Denkfehler erklären.
+
+**Typische Inhalte:**
+
+- Warum Vergleichbarkeit entsteht
+- Warum Agenturen scheitern müssen
+- Warum Tools nichts lösen
+- Warum Führung und Sprache zusammenhängen
+
+**Regel:**
+
+- Keine Handlungsanweisung
+- Kein Call-to-Action
+- Keine Produktnennung
+
+> Wer das Warum versteht, sucht selbst nach dem Wie.
+> 
+
+---
+
+### 4.3 EBENE 3: SYSTEMDENKEN
+
+**„Wie man das Problem strukturell löst.“**
+
+**Zweck:**
+
+Zeigen, dass du **weiter denkst als andere**.
+
+**Typische Inhalte:**
+
+- Marke als Regelwerk
+- Klarheit als Infrastruktur
+- Marken-DNA als Betriebssystem
+- Agenten als Wächter
+
+**Regel:**
+
+- Keine Features
+- Keine Preise
+- Keine Roadmaps
+
+> Das System wird gezeigt – nicht verkauft.
+> 
+
+---
+
+## 5. Was LinkedIn bewusst NICHT ist
+
+Auf LinkedIn gibt es bei „Marke macht.“ **keine**:
+
+- „5 Tipps für …“
+- „So geht besseres Branding“
+- „Das habe ich gelernt“
+- persönlichen Erfolgsstories
+- Kundenlob-Posts
+
+Warum?
+
+> Weil das Denken entwertet.
+> 
+
+---
+
+## 6. Der Stil: ruhig, präzise, nicht erklärend
+
+**Sprachregeln:**
+
+- Kurze Sätze
+- Feststellungen statt Fragen
+- Keine Emojis
+- Kein Storytelling-Zwang
+- Kein „Du musst“
+
+**Haltung:**
+
+- Souverän
+- Nicht defensiv
+- Nicht belehrend
+
+> Du erklärst nicht – du stellst fest.
+> 
+
+---
+
+## 7. Umgang mit Diskussion & Kommentaren
+
+Kommentare sind **Teil des Systems**, nicht Störung.
+
+**Regeln:**
+
+- Keine Rechtfertigung
+- Kein Überzeugen
+- Keine langen Debatten
+
+Antworten sind:
+
+- klärend
+- einordnend
+- konsequent
+
+> Du verteidigst keine Meinung.Du verteidigst eine Logik.
+> 
+
+---
+
+## 8. Einbindung anderer Experten (sehr wichtig)
+
+Andere dürfen:
+
+- argumentieren
+- vertiefen
+- anwenden
+- widersprechen
+
+Aber nur innerhalb des Denkrahmens.
+
+**Du bleibst:**
+
+- Referenzpunkt
+- Klammer
+- Maßstab
+
+> Marke macht. ist kein Netzwerk.Es ist ein Denkmodell mit Anschlussfähigkeit.
+> 
+
+---
+
+## 9. Posting-Frequenz & Rhythmus
+
+- 2–3 Posts pro Woche
+- Qualität > Regelmäßigkeit
+- Wiederholung erlaubt
+- Zuspitzung erwünscht
+
+> Ein Gedanke darf öfter kommen –solange er schärfer wird.
+> 
+
+---
+
+## 10. Verbindung zu markemacht.de
+
+LinkedIn:
+
+- stößt an
+- provoziert
+- fragmentiert
+
+markemacht.de:
+
+- ordnet
+- verdichtet
+- fixiert
+
+**Verlinkung nur, wenn sinnvoll.**
+
+Kein Traffic-Zwang.
+
+---
+
+## 11. Erfolgskriterium (intern)
+
+LinkedIn ist erfolgreich, wenn:
+
+- Geschäftsführer kommentieren mit:
+    
+    > „So habe ich das noch nie gesehen.“
+    > 
+- Diskussionen auf *Sprache*, nicht auf *Maßnahmen* gehen
+- Menschen beginnen, deine Begriffe zu nutzen:
+    - Klarheit
+    - Vergleichbarkeit
+    - Marken-DNA
+    - Regelwerk
+
+Nicht:
+
+- Reichweite
+- Likes
+- Follower-Zahlen
+
+---
+
+## 12. Zusammenfassung (Essenz)
+
+- LinkedIn ist Denkraum, kein Kanal
+- Diagnose vor Lösung
+- System vor Maßnahme
+- Haltung vor Reichweite
+
+> Marke macht.Weil Denken sichtbar werden muss.
+> 
+
+---
+
+### Ende – Wissensdokument 007
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_007Anhang.md

@@ -0,0 +1,123 @@
+# Anhang zu Wissensdokument 007 — Version 1.1
+
+---
+
+## Kommunikations-Produkt-Synchronisation
+
+### Wann welche Botschaft erlaubt ist – und wann nicht
+
+**Status:** Verbindlich
+
+**Version:** 1.1 (ersetzt 1.0)
+
+**Geltung:** Ergänzung zu Dok. 007 · bindend für alle öffentlichen Inhalte
+
+**Zweck:** Vermeidung von Erwartungslücken, Überverkauf und Vertrauensverlust
+
+---
+
+### Änderungsvermerk (gemäß Dok. 000 §5.2)
+
+| Feld | Wert |
+| --- | --- |
+| Version | 1.0 → 1.1 (strukturell, +0.1) |
+| Datum | 27.05.2026 |
+| Begründung | (1) Die Phasen waren an Kalendermonate gebunden. Echte Entwicklung verschiebt sich – der Auslöser für einen Kommunikationswechsel muss ein **erreichter Meilenstein** sein, nicht ein Datum. (2) Die 1.0-Tabelle taktete ausschließlich Brand Rules und legte dadurch implizit auch das Marken-Klarheits-Audit still. Das Audit existiert unabhängig vom Tool (Dok. 005) und ist der legitime CTA ab Tag 1. v1.1 trennt beide Spuren. |
+| Betroffene Dokumente | Dok. 007 (Ebenen), Dok. 008 (Roadmap-Meilensteine), Dok. 005 (Audit als Einstieg) |
+| Entscheidung | Kevin Adametz (Letztinstanz, Dok. 000 §4.1) |
+
+---
+
+## 1. Grundsatz (unverändert, nicht verhandelbar)
+
+> Kommunikation darf dem Produkt niemals vorauslaufen. Aber sie muss ihm vorausdenken.
+
+Das bedeutet:
+
+- Wir erklären **Probleme**, bevor wir Lösungen zeigen
+- Wir erklären **Logik**, bevor wir Produkte nennen
+- Wir erklären **Systeme**, erst wenn sie existieren
+
+Neu in 1.1: *„existieren"* heißt **Meilenstein erreicht**, nicht *„Monat X angebrochen"*.
+
+---
+
+## 2. Zwei getrennte Spuren (Kern der Änderung)
+
+Es gibt **zwei** Kommunikationsspuren mit unterschiedlicher Taktung. Sie dürfen nicht vermischt werden.
+
+### Spur A — Das Audit (läuft ab Tag 1)
+
+Das Marken-Klarheits-Audit ist sofort verfügbar, braucht kein Tool und ist der einzige erlaubte CTA in der Frühphase. Es wird **ruhig** kommuniziert – als logischer nächster Schritt, nicht als Funnel-Mechanik (Dok. 005/006).
+
+- **Erlaubt jederzeit:** Verweis auf das Audit als Einstieg, „Standortbestimmung", „erst Klarheit, dann alles Weitere".
+- **Nicht erlaubt:** Hard-Selling, Verknappung, Rabatt-Sprache, „letzte Plätze".
+
+### Spur B — Brand Rules (meilensteingebunden, langsamer Reveal)
+
+Das Tool wird erst sichtbar, wenn es trägt. Building in public gilt nur für das **Dass** du baust – niemals für das **Was** es kann, solange es das nicht beweisbar kann.
+
+---
+
+## 3. Die Synchronisationsmatrix (meilensteinbasiert)
+
+Bindend für alle LinkedIn-Inhalte, Talks, Artikel und Kommentare.
+
+| **Meilenstein (Auslöser)** | **Definition (woran erkennbar)** | **LinkedIn-Ebene (Dok. 007)** | **Erlaubt** | **Nicht erlaubt** |
+| --- | --- | --- | --- | --- |
+| **M0 – Start** | Heute. Kein validiertes Tool. | **Diagnose** | • Markenprobleme benennen • Unklarheit im Mittelstand • Kritik an Marketing- & KI-Einheitsbrei • Audit als ruhiger CTA (Spur A) | ❌ Tool-Nennung ❌ Lösungsversprechen ❌ Brand Rules |
+| **M1 – Methodik tragfähig** | DNA-Engine + 1 Anwendungsfall + Generieren/Prüfen laufen intern reproduzierbar | **Einordnung** | • Warum Lösungen scheitern • Strategie ohne Infrastruktur verpufft • Denkmodelle (Marke ≠ Content) • „Dass wir bauen" (ohne Was) | ❌ Produkt-Demos ❌ Feature-Talk ❌ Preise |
+| **M2 – Beta validiert** | ≥1 echter Beta-Kunde bestätigt die Prüf-Funktion am realen Inhalt | **Systemdenken** | • Prinzip Brand Rules (Marken-Safe, was der Agent **prüft**, nicht wie technisch) • erste konzeptionelle Einblicke | ❌ Hard-Selling ❌ „Jetzt kaufen" |
+| **M3 – System extern nutzbar** | Governance/Rollen/Audit-Logs stabil; Externe können arbeiten; Partner-Zugänge möglich | **Integration** | • Use Cases • Referenzlogiken (ohne Kunden zu exposen) • Partner-Modelle • Tool als Infrastruktur • Tool-CTA | ❌ reine Theorie ❌ Diagnose-only-Posts |
+
+> Wenn ein Meilenstein sich verschiebt, verschiebt sich die Ebene mit. Nie umgekehrt.
+
+---
+
+## 4. Die vierte Ebene: „Integration" (unverändert aus 1.0)
+
+Integration bedeutet: System ist da, Methode ist bewiesen, Tool ist stabil. Jetzt darf kommuniziert werden, wie Marke im Alltag geführt wird, wie Menschen mit dem System arbeiten, wie Verantwortung verteilt wird.
+
+> Diagnose erzeugt Aufmerksamkeit · Einordnung erzeugt Vertrauen · Systemdenken erzeugt Nachfrage · **Integration erzeugt Skalierung**
+
+---
+
+## 5. Praktische Leitplanken (an Meilensteine gebunden)
+
+**Bis M1 (Spur B still, Spur A aktiv):**
+- 90 % Denken · 10 % Haltung · 0 % Tool-Produkt
+- Audit darf genannt werden (ruhig, kontextgebunden)
+- Kommentarregel zu Brand Rules: *„Dazu später mehr."* / *„Teil eines größeren Systems."* – nie erklären, was noch nicht existiert.
+
+**Ab M2 (Beta validiert):**
+- 60 % Denken · 30 % Systemlogik · 10 % Produkt-Andeutung
+- Erlaubt: *„Wir bauen ein System, das genau dieses Problem adressiert."*
+- Nicht: *„Unser Tool kann das."* (solange nicht breit beweisbar)
+
+**Ab M3 (extern nutzbar):**
+- 40 % System · 40 % Anwendung · 20 % Produkt
+- Jetzt erst: Tool-CTA, Einladungen, Zugänge
+
+---
+
+## 6. Warum diese Kopplung entscheidend ist (unverändert)
+
+Ohne saubere Taktung passiert eines von zwei Dingen: zu früh verkaufen (Erwartung > Produkt → Enttäuschung) oder zu spät sichtbar sein (Produkt da, niemand versteht den Kontext). Die Meilenstein-Logik verhindert beides – und Spur A verhindert zusätzlich, dass monatelang ein Problem benannt wird, ohne dass jemand einen Weg zu dir findet.
+
+---
+
+## 7. Verbindlichkeit
+
+Diese Synchronisation ist kein Vorschlag und kein Marketing-Plan. Sie ist Teil der Governance (Dok. 000). Verstöße sind strategische Fehler, kein Stilproblem.
+
+---
+
+## 8. Essenz (unverändert)
+
+> Erst Problemhoheit. Dann Denkhoheit. Dann Systemhoheit. Dann Markthoheit.
+
+---
+
+### Ende – Anhang zu Wissensdokument 007 (Version 1.1)
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_008.md

@@ -0,0 +1,300 @@
+# Wissensdokument 008
+
+Jetzt übersetzen wir **Strategie → Produkt**. Ohne Feature-Fantasie. Ohne Tool-Ego.
+
+Es definiert **was Brand Rules sein MUSS – und was bewusst nicht gebaut wird**.
+
+---
+
+## Brand Rules – Produkt-Roadmap aus der Strategie
+
+### Vom Marken-Fundament zur operativen Infrastruktur
+
+**Status:** Fixiert
+
+**Version:** 1.0
+
+**Zweck:** Strategisch abgeleitete Produkt-Roadmap
+
+**Rolle im System:** Operative Umsetzung · Skalierung · Entkopplung von Personen
+
+---
+
+## 1. Grundsatz (nicht verhandelbar)
+
+> Brand Rules ist kein Tool für Inhalte.Brand Rules ist ein System für Entscheidungen.
+> 
+
+Jedes Feature muss **eine dieser Fragen schneller, sicherer oder reproduzierbarer beantworten**:
+
+- Ist das markenkonform?
+- Darf die Marke das sagen?
+- Passt das zur Positionierung?
+- Verliert die Marke hier an Klarheit?
+
+Wenn ein Feature nur „Produktivität“ erhöht, aber **keine Entscheidung absichert**, wird es nicht gebaut.
+
+---
+
+## 2. Die vier Produkt-Säulen von Brand Rules
+
+Brand Rules besteht aus **vier funktionalen Säulen**.
+
+Nicht aus Modulen, nicht aus Menüpunkten.
+
+---
+
+### 2.1 SÄULE 1: MARKEN-DNA-ENGINE
+
+**„Was ist diese Marke – verbindlich?“**
+
+### Zweck
+
+- Zentrale, versionierte Quelle der Wahrheit
+- Grundlage für alles Weitere
+
+### Muss-Funktionen (MVP-fähig)
+
+- Strukturierte Erfassung der 5 DNA-Bausteine (Dok. 002)
+- Versionierung (v1.0, v1.1 …)
+- Änderungs-Historie (wer, wann, warum)
+- Klar definierter Owner
+
+### Bewusst NICHT
+
+- Freitext-Essays
+- „Inspirationsfelder“
+- Archetypen-Spielereien im Kern
+
+> Ohne Engine kein System.
+> 
+
+---
+
+### 2.2 SÄULE 2: MARKEN-AGENT (RULE-BASED AI)
+
+**„Wie wendet die Marke ihre Regeln an?“**
+
+### Zweck
+
+- Operative Entlastung
+- Konsistenz im Alltag
+
+### Funktionslogik
+
+- **Generieren** (innerhalb der DNA)
+- **Prüfen** (gegen die DNA)
+- **Ablehnen mit Begründung**
+
+### Muss-Funktionen
+
+- Klarer Modus: *Generieren* vs. *Prüfen*
+- Sichtbare Regelreferenzen („Verstoß gegen Regel X“)
+- Kein stilles Umschreiben
+
+### Bewusst NICHT
+
+- Autonomes Lernen
+- Trend-Optimierung
+- „Kreativer Überraschungsmodus“
+
+> Der Agent ist Wächter, nicht Autor.
+> 
+
+---
+
+### 2.3 SÄULE 3: GOVERNANCE & TEAMS
+
+**„Wer darf was – und warum?“**
+
+### Zweck
+
+- Mittelstandstauglichkeit
+- Skalierbarkeit im Team
+
+### Muss-Funktionen
+
+- Rollenmodell (Owner / Editor / Viewer)
+- Freigabe-Logik
+- Audit-Log
+- DNA-Lock (Inhalte ≠ DNA)
+
+### Warum das kritisch ist
+
+Ohne Governance wird:
+
+- KI gefährlich
+- Marke beliebig
+- Tool unbrauchbar für echte Unternehmen
+
+> Governance ist kein Enterprise-Luxus,sondern Marken-Hygiene.
+> 
+
+---
+
+### 2.4 SÄULE 4: ANWENDUNGS-SCHICHT
+
+**„Wo wirkt die Marke konkret?“**
+
+### Zweck
+
+- Verbindung von Struktur und Realität
+
+### Start-Anwendungsfälle (bewusst begrenzt)
+
+1. LinkedIn-Posts
+2. Website-Absätze
+3. Angebots-/Pitch-Texte
+
+### Regel
+
+- Wenige Anwendungsfälle
+- Hohe Relevanz
+- Klare Prüfmechanik
+
+### Bewusst NICHT
+
+- 20 Content-Formate
+- Social-Media-Kalender
+- Kampagnen-Management
+
+> Tiefe schlägt Breite.
+> 
+
+---
+
+## 3. Produkt-Roadmap (phasenbasiert, realistisch)
+
+---
+
+### PHASE 1 – FUNDAMENT (Monat 1–2)
+
+**Ziel:** System glaubwürdig machen
+
+- Marken-DNA-Engine (vollständig)
+- Ein Anwendungsfall (z. B. LinkedIn)
+- Generieren + Prüfen
+- 3–5 Beta-Kunden
+
+**Erfolgskriterium:**
+
+> „Das ist klar besser als ChatGPT –
+> 
+> 
+> weil es uns zwingt, sauber zu denken.“
+> 
+
+---
+
+### PHASE 2 – SYSTEMVERTRAUEN (Monat 3–4)
+
+- Rollen & Rechte
+- Audit-Logs
+- DNA-Versionierung
+- Validierungs-Feedback (manuell)
+
+**Erfolgskriterium:**
+
+> „Wir trauen dem System –
+> 
+> 
+> und lassen andere damit arbeiten.“
+> 
+
+---
+
+### PHASE 3 – SKALIERUNG (Monat 5–6)
+
+- Weitere Anwendungsfälle
+- Partner-Zugänge
+- API-Vorbereitung (intern)
+
+**Erfolgskriterium:**
+
+> „Die Marke funktioniert auch ohne uns.“
+> 
+
+---
+
+### PHASE 4 – INTELLIGENZ (ab Monat 7)
+
+- RAG-Wissensschicht
+- Kuratierte Methodik
+- Kontrollierte Optimierung (keine Autonomie)
+
+**Erfolgskriterium:**
+
+> „Das System denkt wie wir –
+> 
+> 
+> nicht wie der Markt.“
+> 
+
+---
+
+## 4. Bewusste No-Feature-Liste (sehr wichtig)
+
+Diese Dinge werden **nicht** gebaut – auch wenn Nachfrage entsteht:
+
+- Prompt-Playgrounds
+- Social-Media-Planer
+- Virality-Scores
+- Trend-Analysen
+- Massen-Automatisierung
+- „Mehr Output“-Dashboards
+
+> Brand Rules ist kein Effizienz-Tool.Es ist ein Klarheits-System.
+> 
+
+---
+
+## 5. Internes Wertversprechen (Produktkern)
+
+Brand Rules verkauft nicht:
+
+- Content
+- KI
+- Geschwindigkeit
+
+Sondern:
+
+> Markenkonsistenz ohne Abhängigkeit von Personen.
+> 
+
+Das ist:
+
+- erklärbar
+- verteidigbar
+- skalierbar
+- exit-fähig
+
+---
+
+## 6. Maßstab für jede Feature-Entscheidung
+
+Jede neue Idee muss diese Frage beantworten:
+
+> Macht dieses Feature die Marke klarer,oder nur den Output größer?
+> 
+
+Wenn Output > Klarheit:
+
+- Feature wird gestrichen
+
+---
+
+## 7. Zusammenfassung (Essenz)
+
+- Brand Rules ist Infrastruktur
+- Entscheidungen schlagen Inhalte
+- Governance schlägt Kreativität
+- Weniger Features = mehr Wirkung
+
+> Marke macht.Wenn sie geführt wird.
+> 
+
+---
+
+### Ende – Wissensdokument 008
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_009.md

@@ -0,0 +1,361 @@
+# Wissensdokument 009
+
+Es besteht bewusst aus **zwei klar getrennten Teilen**:
+
+- **A:** Partner- & Community-Modell (strukturell)
+- **B:** Reichweitenaufbau auf LinkedIn (mechanisch, aber markenkonform)
+
+---
+
+## Partner- & Community-Modell **UND** LinkedIn-Reichweite
+
+### Skalierung ohne Verwässerung
+
+**Status:** Fixiert
+
+**Version:** 1.0
+
+**Zweck:**
+
+- Aufbau eines anschlussfähigen Ökosystems
+- Systematischer Reichweitenaufbau auf LinkedIn
+- Wahrung der Autorität von „Marke macht.“
+
+---
+
+# TEIL A – DAS PARTNER- & COMMUNITY-MODELL
+
+## 1. Grundannahme (entscheidend)
+
+> Marke macht. darf wachsen –aber nicht demokratisiert werden.
+> 
+
+Du baust **keine Community von Meinungen**,
+
+sondern ein **Netzwerk von Anwendungen eines Denkmodells**.
+
+Das ist der zentrale Unterschied.
+
+---
+
+## 2. Die Rolle der Community im System
+
+Die Community hat **eine Funktion**:
+
+> Das Denkmodell „Marke macht.“ in die Praxis zu tragen.
+> 
+
+Nicht:
+
+- neue Definitionen schaffen
+- das Modell weiterentwickeln
+- Grundannahmen infrage stellen
+
+Die Community **arbeitet im System**, nicht **am System**.
+
+---
+
+## 3. Die drei Ebenen der Beteiligung
+
+### 3.1 Beobachter (öffentlich)
+
+- LinkedIn-Follower
+- Leser von markemacht.de
+- Kommentierende
+
+**Rolle:**
+
+Verstehen, spiegeln, diskutieren.
+
+**Kein Zugang** zu:
+
+- Tool
+- Methode
+- internen Strukturen
+
+---
+
+### 3.2 Anwender (geschlossen)
+
+- Freelancer
+- Berater
+- interne Markenverantwortliche
+
+**Zugang zu:**
+
+- Brand Rules (limitiert)
+- Marken-DNA-Framework
+- Anwendungswissen
+
+**Pflicht:**
+
+- Anwendung nach Vorgaben
+- keine Methoden-Abwandlung
+- klare Referenz auf „Marke macht.“
+
+---
+
+### 3.3 Partner (kuratierter Kreis)
+
+- ausgewählte Experten
+- zertifiziert
+- sichtbar als Teil des Systems
+
+**Dürfen:**
+
+- Audits durchführen
+- DNA-Prozesse moderieren
+- Kunden ins System führen
+
+**Nicht erlaubt:**
+
+- eigene Markenmodelle
+- eigene Interpretationen
+- eigene Claims
+
+> Partner sind Verstärker – keine Mitautoren.
+> 
+
+---
+
+## 4. Autorität sichern (kritisch)
+
+Du bleibst:
+
+- methodischer Ursprung
+- letzte Instanz
+- Referenzpunkt
+
+Sichtbar durch:
+
+- persönliche Beiträge
+- Freigaben
+- Weiterentwicklung der Methode
+
+> Autorität entsteht durch Klarheit,nicht durch Lautstärke.
+> 
+
+---
+
+# TEIL B – REICHWEITENAUFBAU AUF LINKEDIN (SYSTEMATISCH)
+
+Jetzt zur **konkreten Mechanik**, ohne Content-Marketing-Bullshit.
+
+---
+
+## 5. Grundannahme für Reichweite (wichtig)
+
+> Reichweite entsteht nicht durch Mehrwert,sondern durch Reibung mit bestehenden Denkmodellen.
+> 
+
+LinkedIn belohnt:
+
+- klare Thesen
+- erkennbare Haltung
+- Diskussion
+
+Nicht:
+
+- Vollständigkeit
+- Nettigkeit
+- Ausgewogenheit
+
+---
+
+## 6. Das Reichweiten-Dreieck
+
+Jeder Post muss **mindestens zwei** dieser drei Faktoren erfüllen:
+
+1. **Widerspruchspotenzial**
+2. **Wiedererkennbarkeit**
+3. **Weitererzählbarkeit**
+
+Wenn nur einer erfüllt ist → Reichweite niedrig.
+
+---
+
+## 7. Die 5 Post-Typen für Reichweite (ohne Verwässerung)
+
+### 7.1 Die Diagnose-These (Haupttreiber)
+
+**Beispiel-Struktur:**
+
+> „X ist kein Problem.
+> 
+> 
+> Y ist das eigentliche Problem.“
+> 
+
+Warum sie wirkt:
+
+- Einfach
+- Teilbar
+- Konfrontativ
+
+---
+
+### 7.2 Die Umdeutung
+
+Du nimmst einen bekannten Begriff und drehst ihn:
+
+- Marketing → Führung
+- Marke → Sprache
+- KI → Verstärker von Unklarheit
+
+Diese Posts erzeugen:
+
+- Kommentare
+- Widerspruch
+- Saves
+
+---
+
+### 7.3 Die Grenzziehung
+
+Posts, die sagen:
+
+- „Das machen wir nicht.“
+- „Das funktioniert hier nicht.“
+- „Dafür sind wir nicht gemacht.“
+
+Grenzen erzeugen Vertrauen **und** Reichweite.
+
+---
+
+### 7.4 Die System-Skizze
+
+Sehr einfache Modelle:
+
+- 3 Schritte
+- 1 Ursache → 3 Folgen
+- 1 Fehler → 5 Symptome
+
+Kein Erklären.
+
+Nur Festhalten.
+
+---
+
+### 7.5 Die Reaktion auf aktuelle Themen
+
+Nicht:
+
+- News erklären
+
+Sondern:
+
+- einordnen
+
+Beispiel:
+
+> „Alle reden über X.
+> 
+> 
+> Das eigentliche Problem liegt woanders.“
+> 
+
+---
+
+## 8. Posting-Frequenz & Timing (realistisch)
+
+- 2–3 Posts pro Woche
+- Gleiche Wochentage
+- Morgens oder früher Vormittag
+
+**Wichtig:**
+
+Reichweite wächst **kumulativ**, nicht linear.
+
+---
+
+## 9. Kommentar-Strategie (unterschätzt)
+
+Reichweite entsteht **nicht nur** im eigenen Feed.
+
+Regeln:
+
+- kommentiere bei Entscheidern
+- kommentiere bei Experten
+- kommentiere nicht zustimmend, sondern einordnend
+
+Ein guter Kommentar:
+
+- ist eigenständig zitierbar
+- erweitert den Denkrahmen
+- widerspricht respektvoll
+
+> Kommentare sind Mini-Posts mit Fremdreichweite.
+> 
+
+---
+
+## 10. Wachstum ohne Algorithmen-Spielchen
+
+Was du **nicht** brauchst:
+
+- Hooks mit Emojis
+- Clickbait
+- Persönliche Dramen
+- Engagement-Pods
+
+Was du brauchst:
+
+- Wiederholte klare Thesen
+- Gleiche Begriffe
+- Gleiche Logik
+
+> Marken wachsen durch Wiederholung,nicht durch Abwechslung.
+> 
+
+---
+
+## 11. Erfolgsmessung (realistisch)
+
+Relevant:
+
+- Kommentare von Entscheidern
+- wiederkehrende Diskutanten
+- Zitate deiner Begriffe
+
+Irrelevant:
+
+- Impressionen
+- Likes
+- Follower-Zahlen isoliert
+
+---
+
+## 12. Zusammenspiel von Community & Reichweite
+
+LinkedIn:
+
+- offen
+- konfrontativ
+- öffentlich
+
+Community:
+
+- geschlossen
+- strukturiert
+- diszipliniert
+
+> Öffentlichkeit erzeugt Aufmerksamkeit.Struktur erzeugt Skalierung.
+> 
+
+---
+
+## 13. Zusammenfassung (Essenz)
+
+- Community ist Anwendung, nicht Mitbestimmung
+- Reichweite entsteht durch Haltung, nicht Tipps
+- Wiederholung schlägt Kreativität
+- Autorität schlägt Popularität
+
+> Marke macht.Wenn sie Grenzen zieht.
+> 
+
+---
+
+### Ende – Wissensdokument 009
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_010.md

@@ -0,0 +1,297 @@
+# Wissensdokument 010 — Version 1.1
+
+Das ist das Dokument, bei dem skeptische Geschäftsführer innerlich sagen:
+
+> „Okay. Jetzt verstehe ich, was damit gemeint ist."
+
+---
+
+## Marken-DNA-Referenzfälle
+
+### Wie Klarheit konkret aussieht – und was ohne sie schiefgeht
+
+**Status:** Fixiert
+
+**Version:** 1.1 (ersetzt 1.0)
+
+**Zweck:** Verankerung der Methode in realen Anwendungsszenarien
+
+**Rolle:** Beweis · Schulung · Vertriebsunterstützung
+
+---
+
+### Änderungsvermerk (gemäß Dok. 000 §5.2)
+
+| Feld | Wert |
+| --- | --- |
+| Version | 1.0 → 1.1 (strukturell) |
+| Datum | 27.05.2026 |
+| Begründung | Dok. 013 §11 (MVP) macht anonymisierte Referenzfälle zu einem öffentlichen Conversion-Asset. Neue Sektion 4a autorisiert die öffentliche, anonymisierte Nutzung und setzt die Schutzgrenze (Anonymisierung, kein Methodik-Leak – Dok. 000 §9). |
+| Betroffene Dokumente | Dok. 013 §11, Dok. 000 §9 |
+| Entscheidung | Kevin Adametz (Letztinstanz, Dok. 000 §4.1) |
+
+---
+
+## 1. Zweck dieses Dokuments
+
+Dieses Dokument existiert, um: Abstraktion zu beenden, Missverständnisse zu verhindern, Erwartungshaltungen zu justieren.
+
+Es zeigt: **wie** eine Marken-DNA aussieht, **warum** sie funktioniert, **wo** typische Fehler liegen.
+
+> Nicht als Vorbild zum Kopieren. Sondern als Referenz zum Verstehen.
+
+---
+
+## 2. Aufbau der Referenzfälle (einheitlich)
+
+Jeder Fall folgt exakt derselben Struktur:
+
+1. Ausgangslage (realistisch, unscharf)
+2. Typische Fehler (vor der DNA)
+3. Marken-DNA (v1.0 – vollständig)
+4. Validierungsbeispiel (Text)
+5. Was ohne DNA passiert wäre
+
+---
+
+# REFERENZFALL A
+
+## Maschinenbauer (B2B, 120 MA)
+
+### 1. Ausgangslage
+
+- Hochspezialisierte Sondermaschinen
+- Technisch führend
+- Vertrieb stark personenabhängig
+- Kommunikation schwankt zwischen: „Ingenieursstolz", „Wir sind flexibel", „Alles aus einer Hand"
+
+Der Geschäftsführer kann das Unternehmen **nicht konsistent erklären**.
+
+### 2. Typische Fehler (vor der DNA)
+
+- Begriffe wie „innovativ", „maßgeschneidert", „Qualität made in Germany"
+- Technische Tiefe ohne Einordnung
+- Marketingtexte klingen wie alle anderen Maschinenbauer
+
+**Problem:** Austauschbarkeit trotz technischer Exzellenz.
+
+### 3. Marken-DNA v1.0 (Auszug)
+
+**1. Identitätskern**
+
+> Wir bauen Maschinen, die Produktionsrisiken eliminieren.
+
+**2. Positionierungslogik**
+
+> Nicht der günstigste Anbieter. Sondern derjenige, der Stillstand ausschließt.
+
+**3. Sprach- & Tonalitätsregeln**
+
+- sachlich
+- präzise
+- keine Superlative
+- Zahlen vor Emotionen
+
+**4. Themenrahmen**
+
+- Prozesssicherheit
+- Verfügbarkeit
+- Wartbarkeit
+- Total Cost of Ownership
+
+**5. Entscheidungs- & Grenzregeln**
+
+- Keine Aussagen ohne technische Begründung
+- Keine Versprechen ohne Referenz
+- Keine Emotionalisierung von Technik
+
+### 4. Validierungsbeispiel (LinkedIn-Post)
+
+**DNA-konform:**
+
+> Unsere Maschinen verkaufen keine Leistung. Sie verhindern Produktionsstillstand. Das ist kein Marketingversprechen, sondern eine kalkulierbare Größe.
+
+**DNA-Verletzung (abgelehnt):**
+
+> Wir lieben Technik und Innovation.
+
+(Begründung: unspezifisch, austauschbar)
+
+### 5. Ohne Marken-DNA wäre passiert
+
+- Neues Marketing hätte alte Floskeln reproduziert
+- Vertrieb hätte weiter individuell argumentiert
+- KI-Content hätte Austauschbarkeit verstärkt
+
+---
+
+# REFERENZFALL B
+
+## IT-Dienstleister (Cloud & Security, 40 MA)
+
+### 1. Ausgangslage
+
+- Hohe Kompetenz
+- Schnelles Wachstum
+- Unterschiedliche Tonalitäten je Mitarbeiter
+- Website, Sales, LinkedIn widersprechen sich
+
+### 2. Typische Fehler
+
+- zu viele Leistungen
+- keine klare Grenze
+- Buzzwords ohne Haltung
+- „Wir beraten ganzheitlich"
+
+### 3. Marken-DNA v1.0 (Auszug)
+
+**1. Identitätskern**
+
+> Wir reduzieren IT-Komplexität auf Entscheidungen.
+
+**2. Positionierungslogik**
+
+> Wir verkaufen keine Tools. Wir schaffen Entscheidungsfähigkeit.
+
+**3. Sprach- & Tonalitätsregeln**
+
+- ruhig
+- erklärend, aber nicht belehrend
+- kein Tech-Jargon ohne Nutzenbezug
+
+**4. Themenrahmen**
+
+- Verantwortung
+- Risiko
+- Entscheidungsfolgen
+- Governance
+
+**5. Entscheidungs- & Grenzregeln**
+
+- Keine Tool-Empfehlung ohne Kontext
+- Keine Trend-Kommunikation
+- Keine Versprechen ohne Governance
+
+### 4. Validierungsbeispiel
+
+**DNA-konform:**
+
+> Cloud ist kein Technologiethema. Es ist eine Führungsentscheidung.
+
+**DNA-Verletzung:**
+
+> Wir helfen Ihnen, Ihre IT zukunftssicher zu machen.
+
+(Begründung: inhaltsleer, nicht entscheidungsfähig)
+
+### 5. Ohne Marken-DNA
+
+- Sales pitcht Tools
+- Marketing pitcht Vision
+- Geschäftsführung pitcht Sicherheit
+
+→ Vertrauensverlust.
+
+---
+
+# REFERENZFALL C
+
+## Beratungsunternehmen (Strategie, 8 MA)
+
+### 1. Ausgangslage
+
+- Starke Gründerpersönlichkeit
+- Know-how nicht übertragbar
+- Inhalte hängen am Inhaber
+
+### 2. Typische Fehler
+
+- Personal Branding ersetzt Marke
+- Inhalte wirken beliebig
+- Skalierung nicht möglich
+
+### 3. Marken-DNA v1.0 (Auszug)
+
+**1. Identitätskern**
+
+> Wir treffen Entscheidungen dort, wo andere moderieren.
+
+**2. Positionierungslogik**
+
+> Keine Workshops. Keine Konsensrunden. Klare Festlegungen.
+
+**3. Sprach- & Tonalitätsregeln**
+
+- direkt
+- knapp
+- nicht erklärend
+
+**4. Themenrahmen**
+
+- Verantwortung
+- Konsequenz
+- Führung
+
+**5. Entscheidungs- & Grenzregeln**
+
+- Keine Gruppendiskussionen
+- Keine „Haltungsvielfalt"
+- Keine Kompromisssprache
+
+### 4. Validierung
+
+**DNA-konform:**
+
+> Unentschiedenheit ist keine Strategie.
+
+### 5. Ohne DNA
+
+- Mitarbeiter kopieren Stil, nicht Haltung
+- Qualität schwankt
+- Marke bleibt Person
+
+---
+
+## 3. Zentrale Erkenntnisse aus allen Fällen
+
+1. Marken-DNA ist **immer konkret**
+2. Grenzen sind wirksamer als Aussagen
+3. Fehler entstehen durch Unschärfe
+4. KI verstärkt schlechte DNA
+5. Klarheit ist skalierbar – Meinung nicht
+
+---
+
+## 4. Abgrenzung (wichtig)
+
+Diese Referenzfälle sind: **keine Templates**, **keine Best Practices**, **keine Vorlagen zum Kopieren**.
+
+Sie sind:
+
+> Beweise für Struktur.
+
+---
+
+## 4a. Öffentliche Nutzung (anonymisiert)
+
+Die Referenzfälle dürfen – über interne Schulung und Vertriebsunterstützung hinaus – **öffentlich als Beweis** eingesetzt werden (Conversion-Auffahrt, Dok. 013 §11).
+
+Bedingungen (verbindlich):
+
+- **Anonymisiert.** Keine identifizierbaren Kunden, keine Rückschlüsse auf reale Unternehmen.
+- **Beweis, nicht Bauplan.** Gezeigt wird das *Ergebnis* (DNA-konform vs. DNA-Verletzung), nicht die vollständige Methodik (Dok. 000 §9: extern nur freigegebene Auszüge).
+- **Keine Vorlage.** Die Fälle bleiben Beweise für Struktur – keine kopierbaren Templates (§4 bleibt gültig).
+
+> Der Beweis wird sichtbar. Die Methode bleibt drinnen.
+
+---
+
+## 5. Essenz (für Vertrieb & Erklärung)
+
+> Marken-DNA klingt nicht schön. Sie klingt eindeutig. Und genau deshalb wirkt sie.
+
+---
+
+### Ende – Wissensdokument 010 (Version 1.1)
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_011.md

@@ -0,0 +1,248 @@
+# Wissensdokument 011 — Version 1.2
+
+Ab hier ist *Marke macht.* kein Denkmodell mehr, sondern ein **prüfbares System**. Formuliert so, dass es menschlich moderierbar, technisch abbildbar und verkaufbar ist – und Streit beendet, statt ihn zu verlängern.
+
+---
+
+## Validierungs-Scorecard & Entscheidungslogik
+
+### Der Marken-TÜV für Inhalte, Aussagen und Systeme
+
+**Status:** Fixiert
+
+**Version:** 1.2 (ersetzt 1.0)
+
+**Zweck:** Objektive Prüfung von Markenkonformität
+
+**Rolle:** Absicherung · Qualität · Entscheidungsinstanz
+
+---
+
+### Änderungsvermerk (gemäß Dok. 000 §5.2)
+
+| Feld | Wert |
+| --- | --- |
+| Version | 1.0 → 1.2 (konsolidiert zwei Schritte) |
+| Datum | 27.05.2026 |
+| Begründung (v1.1) | Dok. 013 §6 führt den DNA-Reifegrad ein – die Bewertung der DNA *selbst*, getrennt von der Inhalts-Konformität. Neue Sektion 2a etabliert die zwei Score-Ebenen; die bestehende Scorecard wird damit Ebene 2. |
+| Begründung (v1.2) | §3 vergab Gewichtungen, §4 rechnete flach – ein Text mit verletztem Identitätskern (K1 = ❌) erreichte 6/7 und wäre freigabefähig. v1.2 ersetzt die dekorativen Label durch echte Konsequenz-Stufen (K6 harter Override, K1/K2 weicher Override). Schwellenwerte unverändert. |
+| Betroffene Dokumente | Dok. 013 (§6), Dok. 002 (Bausteinkriterien), Dok. 011b v1.2 (Technik) |
+| Entscheidung | Kevin Adametz (Letztinstanz, Dok. 000 §4.1) |
+
+---
+
+## 1. Grundsatz (nicht verhandelbar)
+
+> Markenkonformität ist keine Geschmacksfrage. Sie ist prüfbar.
+
+Die Validierungs-Scorecard existiert, um Diskussionen zu beenden, Subjektivität zu eliminieren, Entscheidungen zu beschleunigen, Verantwortung zu klären. Sie ersetzt Bauchgefühl, Mehrheitsmeinung, kreative Debatten.
+
+---
+
+## 2. Wer validiert? (Rollen klar trennen)
+
+### 2.1 Primäre Validierungsinstanz
+
+**Der Marken-Agent (Brand Rules)** – prüft regelbasiert, ohne Kontextdehnung, ohne Interpretation.
+
+### 2.2 Sekundäre Validierungsinstanz
+
+**Der Marken-Owner (Unternehmen / Geschäftsführer)** – entscheidet bei Grenzfällen, verantwortet DNA-Änderungen, trägt finale Haftung.
+
+### 2.3 Tertiäre Instanz (optional)
+
+**Methodische Instanz (adametz.media / zertifizierter Partner)** – moderiert Widersprüche, interpretiert bei strukturellen Konflikten, entscheidet **nicht**, sondern klärt.
+
+> Der Agent prüft. Der Mensch entscheidet. Die Methode begrenzt.
+
+---
+
+## 2a. Die zwei Score-Ebenen
+
+Die Validierung hat **zwei getrennte Ebenen**.
+
+**Ebene 1 – DNA-Reifegrad (vorgelagert).**
+Bewertet die **DNA selbst**: Ist die Referenz scharf genug, um überhaupt prüfen zu können? Baustein für Baustein gegen Dok. 002:
+
+- Identitätskern – gilt er produkt- und marktunabhängig?
+- Positionierung – echter Ausschluss oder „flexibel für alle"?
+- Sprach-/Tonregeln – prüfbar (erkennbare Verletzungsbedingung)?
+- Themenrahmen – klare Tabus gesetzt?
+- Grenzregeln – explizite No-Gos vorhanden?
+
+Inhaltsunabhängig. Frage: *Wie scharf ist die Referenz?* Ergebnis: ein Reifegrad pro Baustein plus Gesamtwert.
+
+**Ebene 2 – Inhalts-Konformität (die Scorecard, §3 ff.).**
+Bewertet, ob ein **Inhalt** zur DNA passt – die sieben Kriterien.
+
+**Kopplung (entscheidend).** Eine unsichere Konformitätsprüfung (Ebene 2) muss auf einen schwachen Baustein (Ebene 1) zurückführbar sein. Die Begründung wird **nach oben zugeschrieben**: „Prüfung unsicher, weil Baustein X unterdefiniert." Nicht der Inhalt ist schuld, sondern die unscharfe Referenz. (Mechanik: Dok. 011b · Conversion-Wirkung: Dok. 013 §6.)
+
+> Bevor man prüft, ob ein Text zur Marke passt, muss feststehen, ob die Marke scharf genug ist, um überhaupt etwas prüfen zu können.
+
+---
+
+## 3. Die Validierungs-Scorecard – Ebene 2 (Kern des Dokuments)
+
+Jeder Inhalt wird anhand von **7 Kriterien** geprüft. Jedes ist **binär oder abgestuft** bewertbar.
+
+Statt arithmetischer Gewichte gelten **drei Konsequenz-Stufen**:
+
+- **Absolut (K6):** ❌ = sofortige Ablehnung, überstimmt alles.
+- **Sehr hoch (K1, K2):** ❌ = keine Freigabe möglich (Status max. „Überarbeiten"), unabhängig vom Gesamtscore.
+- **Hoch / Mittel (K3, K4, K5, K7):** fließen flach in den Punktescore **und** dienen als Urteilspriorität bei Grenzfällen (Human Gate).
+
+---
+
+### KRITERIUM 1: Identitätskern-Kohärenz · Konsequenz: sehr hoch
+
+**Frage:** Entspricht die Aussage dem festgelegten Identitätskern?
+
+**Bewertung:** ✔️ eindeutig konform · ⚠️ indirekt / verwässert · ❌ widerspricht dem Kern (→ keine Freigabe)
+
+**Ablehnungsbeispiel:** Identitätskern *„Wir eliminieren Risiken."* / Text *„Wir lieben innovative Lösungen."*
+
+---
+
+### KRITERIUM 2: Positionierungslogik · Konsequenz: sehr hoch
+
+**Frage:** Stärkt der Inhalt die gewählte Abgrenzung?
+
+**Bewertung:** ✔️ klar differenzierend · ⚠️ neutral · ❌ nivellierend / vergleichbar (→ keine Freigabe)
+
+**Ablehnung bei:** „Wir sind wie andere – nur besser" · Preis-/Leistungsangleichung ohne Haltung.
+
+---
+
+### KRITERIUM 3: Sprach- & Tonalitätsregeln · Konsequenz: hoch
+
+**Frage:** Entspricht Sprache, Rhythmus und Haltung den Regeln?
+
+**Bewertung:** ✔️ vollständig regelkonform · ⚠️ einzelne Abweichungen · ❌ klare Regelverletzung
+
+**Automatisch negativ bei:** verbotenen Begriffen, Marketing-Floskeln, Superlativen ohne Substanz.
+
+---
+
+### KRITERIUM 4: Themenrahmen · Konsequenz: mittel
+
+**Frage:** Bewegt sich der Inhalt innerhalb des erlaubten Themenkorridors?
+
+**Bewertung:** ✔️ Kernthema · ⚠️ angrenzendes Thema · ❌ außerhalb des Rahmens
+
+**Hinweis:** Außerhalb ≠ falsch, aber **nicht markenkonform**.
+
+---
+
+### KRITERIUM 5: Entscheidungsfähigkeit · Konsequenz: hoch
+
+**Frage:** Ermöglicht der Inhalt eine klare Entscheidung oder Einordnung?
+
+**Bewertung:** ✔️ Entscheidung wird erleichtert · ⚠️ Erklärung ohne Konsequenz · ❌ unverbindlich / vage
+
+**Ablehnung bei:** Motivationssprache, Absichtserklärungen, „Wir glauben …".
+
+---
+
+### KRITERIUM 6: Grenzregeln & No-Gos · Konsequenz: absolut
+
+**Frage:** Verstößt der Inhalt gegen explizite Verbote?
+
+**Bewertung:** ✔️ kein Verstoß · ❌ sofortige Ablehnung
+
+**Regel:** Ein Verstoß hier **überstimmt alle anderen Kriterien**.
+
+---
+
+### KRITERIUM 7: Konsistenz zur aktuellen DNA-Version · Konsequenz: mittel
+
+**Frage:** Ist der Inhalt konsistent mit der **aktuellen** Version der Marken-DNA?
+
+**Bewertung:** ✔️ konsistent · ⚠️ basiert auf älterer Version · ❌ widersprüchlich
+
+---
+
+## 4. Gesamtauswertung (Entscheidungslogik)
+
+### Override-Regeln (vor dem Score)
+
+1. **K6 ❌** → sofortige Ablehnung (FAIL)
+2. **K1 ❌ oder K2 ❌** → Status maximal „Überarbeiten" (keine Freigabe), unabhängig vom Score
+
+Erst danach entscheidet der Punktescore.
+
+### Bewertungssystem
+
+- ✔️ = 1 Punkt · ⚠️ = 0,5 Punkte · ❌ = 0 Punkte
+- Maximal: 7 Punkte
+
+### Entscheidungsstufen
+
+| Score | Status | Konsequenz |
+| --- | --- | --- |
+| 6–7 | Freigabefähig | Veröffentlichung erlaubt |
+| 4–5,5 | Überarbeiten | Konkrete Hinweise |
+| < 4 | Abgelehnt | Inhalt nicht zulässig |
+
+**Wichtig:** Die Overrides aus §4 greifen vor dieser Tabelle.
+
+---
+
+## 5. Umgang mit Widersprüchen (klar geregelt)
+
+### Fall A: Inhalt widerspricht DNA
+
+→ **Inhalt wird abgelehnt** → DNA bleibt unverändert
+
+### Fall B: Inhalt fühlt sich „richtig" an, passt aber nicht
+
+→ Klärungsfrage: **Will das Unternehmen die DNA ändern – oder den Inhalt verwerfen?** Keine stillen Anpassungen.
+
+### Fall C: DNA ist unklar / widersprüchlich
+
+→ DNA wird gesperrt → Rücksprung zu Dok. 003 (Phase 3) → Versionierung erforderlich
+
+> Inhalte passen sich der DNA an – nicht umgekehrt.
+
+---
+
+## 6. Technische Umsetzung (Logik von Brand Rules)
+
+Die Scorecard wird im Tool abgebildet als: sichtbare Prüfkriterien, Begründung je Ablehnung, Referenz auf betroffene Regel, Verlinkung zur DNA-Stelle.
+
+Keine Blackbox. Keine „KI sagt nein". (Technische Spezifikation inkl. DNA-Reifegrad: Dok. 011b.)
+
+---
+
+## 7. Missbrauchsvermeidung
+
+Die Scorecard darf **nicht** verwendet werden für: politische Machtspiele, interne Grabenkämpfe, persönliche Vorlieben.
+
+Sie dient:
+
+> nur der Marke, nicht den Menschen.
+
+---
+
+## 8. Abgrenzung (wichtig)
+
+Diese Validierung ist **kein**: Qualitätsmanagement, Lektorat, Stil-Check.
+
+Sie ist:
+
+> Markenführung in operativer Form.
+
+---
+
+## 9. Essenz (komprimiert)
+
+- Marke ist prüfbar
+- Klarheit ist messbar – die Schärfe der Referenz zuerst (Ebene 1), dann die Konformität des Inhalts (Ebene 2)
+- Entscheidungen sind reproduzierbar
+
+> Wenn man Bedeutung führen will, muss man sie prüfen können.
+
+---
+
+### Ende – Wissensdokument 011 (Version 1.2)
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_011b.md

@@ -0,0 +1,252 @@
+# Wissensdokument 011b — Version 1.2
+
+Wenn Brand Rules glaubwürdig sein soll, braucht es eine **technische Übersetzung**: messbar, implementierbar, debugbar. Kein Kundenmaterial, sondern **Systemdesign + Entscheidungslogik + konkrete Checks**.
+
+---
+
+## Technischer Anhang zur Validierungs-Scorecard
+
+### Wie der Marken-TÜV in Brand Rules implementiert wird
+
+**Status:** Intern · Fixiert
+
+**Version:** 1.2 (ersetzt 1.0)
+
+**Zweck:** Technische Spezifikation der Scorecard-Implementierung
+
+**Ziel:** Automatisierbare Prüfungen + klare Grenzfall-Logik
+
+---
+
+### Änderungsvermerk (gemäß Dok. 000 §5.2)
+
+| Feld | Wert |
+| --- | --- |
+| Version | 1.0 → 1.2 (konsolidiert zwei Schritte) |
+| Datum | 27.05.2026 |
+| Begründung (v1.1) | Technische Spezifikation der neuen Ebene 1 (DNA-Reifegrad) aus Dok. 011 v1.2 / Dok. 013 §6 – neue Sektion 3a. |
+| Begründung (v1.2) | Override-Regeln in §4.1 ergänzt: K1/K2 ❌ → max. REVISE (Spiegel zu Dok. 011 v1.2). |
+| Betroffene Dokumente | Dok. 011 v1.2 (§2a, §3, §4), Dok. 013 (§6, §9), Dok. 002, Dok. 004 |
+| Entscheidung | Kevin Adametz (Letztinstanz, Dok. 000 §4.1) |
+
+---
+
+## 1. Leitprinzipien der Implementierung
+
+1. **Deterministisch, wo möglich** (Keywords, Regex, strukturierte Regeln)
+2. **LLM nur dort, wo Semantik nötig ist** (Kohärenz, Positionierung, Tonalität)
+3. **Jede Ablehnung muss begründbar sein** (Rule-ID, Evidence, Empfehlung)
+4. **Keine Blackbox** (Audit-Log, Scores, Quellen)
+
+> Ziel ist nicht „KI entscheidet", sondern „System prüft".
+
+---
+
+## 2. Datenmodell (Minimum)
+
+### 2.1 Marken-DNA als strukturierte Entität
+
+- `brand_id`
+- `dna_version` (semver, z. B. 1.2.0)
+- `identity_core` (1–2 Sätze + optional: Bullet-Claims)
+- `positioning_logic` (Problem, Logik, Abgrenzung)
+- `tone_rules` (Do/Don't + Stilparameter)
+- `topic_corridor` (core_topics, adjacent_topics, taboo_topics)
+- `guardrails` (verbotene Begriffe, verbotene Claims, verbotene Formate)
+- `maturity` (Reifegrad je Baustein + Gesamt — siehe §3a)
+
+### 2.2 Validierungsobjekt
+
+- `content_id`
+- `content_type` (LI, Website, Angebot)
+- `text`
+- `context` (Zielgruppe, Thema, Kanal)
+- `dna_version_ref`
+- `scores` (K1..K7)
+- `status` (PASS / REVISE / FAIL)
+- `reasons[]` (Rule-ID + Explanation + Evidence)
+- `suggestions[]` (konkrete Korrekturhinweise)
+- `validated_by` (Agent / Human)
+
+---
+
+## 3. Scorecard-Kriterien: Technische Umsetzung (Ebene 2)
+
+### Kriterium 6: Grenzregeln & No-Gos (absolut, deterministisch)
+
+**Ziel:** Sofortige Ablehnung bei Verstoß. **Implementierung:** Regel-Engine + Pattern Matching.
+
+**Mechaniken:** Keyword-Liste (exakte Matches, case-insensitive) · Lemma-/Stemming-Varianten (optional) · Regex (für Claims wie „Nr. 1", „Marktführer", „garantiert") · Phrase-Matcher (z. B. Aho-Corasick).
+
+**Datenstruktur:** `forbidden_terms[]` · `forbidden_phrases[]` · `forbidden_patterns[]` (Regex) · `allowed_exceptions[]` (Whitelist, z. B. wenn in Zitat).
+
+**Output:** FAIL · Reason: `GR-TERM-003` („Verbotener Begriff: ‚ganzheitlich'") · Evidence: Fundstelle (Index / Snippet).
+
+> Das ist der einfachste, sicherste Teil. Den musst du 100 % deterministic bauen.
+
+### Kriterium 3: Sprach- & Tonalitätsregeln (hybrid)
+
+**Ziel:** Tonalität + Stilregeln prüfen. **Implementierung:** Kombi aus deterministischen Checks (Länge, Superlative, Buzzwords) + optionaler Klassifikation (LLM oder kleiner Text-Classifier).
+
+**Deterministische Checks:** Satzlänge (Durchschnitt/Maximum) · Anteil Passivkonstruktionen (heuristisch) · Anteil Füllwörter (Stopword-Liste) · Superlativ-/Hype-Liste (innovativ, einzigartig, revolutionär …).
+
+**Semantische Tonalität (LLM-Check), Prompt-Template:** „Bewerte den Text anhand folgender Ton-Regeln (Do/Don't). Gib nur JSON mit score und Belegen (Zitatstellen)."
+
+**Scoring:** ✔️ deterministische Regeln eingehalten + LLM-score hoch · ⚠️ einzelne Abweichungen · ❌ klare Regelverletzung oder LLM-score unter Schwellwert.
+
+**Output:** Score + Evidence + konkrete Rewrite-Hinweise.
+
+### Kriterium 4: Themenrahmen (semi-deterministisch)
+
+**Ziel:** Liegt der Inhalt im erlaubten Themenkorridor?
+
+**Option A (einfach):** Themen = Tags mit Keyword-Sets, Score nach Treffern/Gewichtung.
+**Option B (besser):** je Thema ein definierender Text-Snippet, Embed Text + Snippets, Similarity → Top-Topic.
+
+**Output:** core_topic / adjacent_topic / out_of_scope · Evidence: Begriffe / Similarities.
+
+### Kriterium 5: Entscheidungsfähigkeit (LLM-gestützt + Heuristik)
+
+**Ziel:** Ist der Text handlungsfähig oder nur vage?
+
+**Implementierung:** Heuristik (weiche Verben/Floskeln: glauben, möchten, helfen, ganzheitlich) + LLM-Klassifikation („Enthält der Text eine klare Konsequenz / These / Entscheidung?").
+
+**LLM-Output (JSON):** `decision_strength` (0–100) · `vagueness_flags[]` · `suggested_sharpening`.
+**Mapping:** ≥70 = ✔️ · 40–70 = ⚠️ · <40 = ❌.
+
+### Kriterium 1: Identitätskern-Kohärenz (Embedding + LLM-Richter)
+
+**2-Stufen-Ansatz:** (1) Embedding-Similarity zwischen Identitätskern und Text/Sätzen. (2) LLM-Adjudication: bekommt Identitätskern + Text + Similarity + Guardrails, Aufgabe „Ist das kohärent? Nenne 1–2 Stellen, die passen/nicht passen."
+
+**Mapping:** Similarity hoch + LLM „coherent" → ✔️ · gemischt → ⚠️ · LLM „contradicts" → ❌.
+**Output:** Reason `ID-COH-002` · Evidence: konkrete Textstellen.
+
+### Kriterium 2: Positionierungslogik (RAG-gestützte Regeln + LLM)
+
+**Implementierung:** Positionierung als strukturierte Regeln („Wir sind NICHT …", „Wir lösen X durch Y"). LLM-Check: „Stärkt der Text diese Abgrenzung oder nivelliert er?" Optional: Embedding-Vergleich gegen Abgrenzungs-Sätze.
+
+**Ablehnung bei:** „wir sind flexibel für alle" · „wir machen alles" · Preis-/Feature-Vergleich ohne Logik.
+
+### Kriterium 7: Konsistenz zur DNA-Version (deterministisch)
+
+**Implementierung:** Jeder Content speichert `dna_version_ref`. Bei DNA-Update: „Revalidate required" oder „compatible" (wenn nur redaktionell). **Regel:** Methodische/strukturelle Updates → Revalidation erzwingen.
+
+---
+
+## 3a. DNA-Reifegrad — technische Umsetzung (Ebene 1)
+
+**Ziel:** die Schärfe der DNA selbst messen, bevor Inhalte geprüft werden. Pro Baustein ein `maturity_score` (0–100) aus hybriden Checks.
+
+**Positionierung / Abgrenzung**
+- deterministisch: Weichmacher-Muster als Negativsignal (`flexibel`, `für alle`, `ganzheitlich`, `individuell`, `alles aus einer Hand`)
+- LLM-Richter: „Ist dies ein Ausschluss oder eine Anpreisung?" (Dok. 002 §3.2)
+
+**Sprach-/Tonregeln**
+- Anteil **prüfbarer** Regeln (mit erkennbarer Verletzungsbedingung – Don'ts oder positive Regeln mit klarer Verletzung, Dok. 002 §3.3)
+- zu wenige prüfbare Regeln → niedriger Reifegrad
+
+**Grenzregeln**
+- Vorhandensein expliziter No-Go-Listen (Begriffe, Formate, Claims)
+- leere Listen → niedriger Reifegrad (Dok. 002 §3.5)
+
+**Identitätskern**
+- LLM-Check gegen Testfrage „gilt der Kern auch bei Produkt-/Marktwechsel?"
+- Marktbegriff-/Nutzenversprechen-Detektor (Kern darf keine enthalten, Dok. 002 §3.1)
+
+**Themenrahmen**
+- sind Kern-Themen (max. 3) und Tabu-Themen gesetzt? (Dok. 002 §3.4)
+
+**Output je Baustein:** `maturity_score`, `gaps[]` (was fehlt), `standard_ref` (Kriterium/Testfrage aus Dok. 002).
+
+**Kopplungsregel:** Sinkt die Konfidenz einer Inhaltsprüfung (K1/K2 aus §3) unter Schwellwert UND ist der zugehörige Baustein-Reifegrad niedrig → Status-Begründung referenziert den **Baustein**, nicht den Inhalt (`reason: LOW-DNA-MATURITY`, `baustein_ref`).
+
+**Guardrails (Dok. 013 §9 / Dok. 004):**
+- Ausgabe ist **Symptom + Maßstab, nie Substanz** – das System zeigt das Kriterium, schreibt aber die DNA nicht (KI erfindet keine Marke).
+- Reifegrad als **steigende Zahl** darstellen (Fortschritt sichtbar, nicht Versagen).
+
+> Der Prüfstand prüft jetzt auch das Maß, gegen das er prüft.
+
+---
+
+## 4. Entscheidungslogik im Tool (inkl. 4,5 Punkte)
+
+### 4.1 Status-Mapping (automatisch)
+
+**Override-Regeln (vor dem Score):**
+- Fail bei K6 → `FAIL`
+- ❌ bei K1 oder K2 → Status max. `REVISE` (kein `PASS`), unabhängig vom Score
+
+**Danach Score-Mapping:**
+- **PASS:** Score ≥ 6 und keine Override-Verletzung
+- **REVISE:** Score 4–5,5 (oder durch K1/K2-Override gedeckelt)
+- **FAIL:** Score < 4 oder Fail bei K6
+
+### 4.2 Was passiert bei 4,5 Punkten?
+
+**Standard:** Status = REVISE (automatisch). **Tool-Verhalten:** zeigt die 2–3 größten Hebel (Top Reasons), bietet „Rewrite mit Regeln" an, markiert als „Freigabe nur durch Human Owner".
+
+### 4.3 Grenzfall-Regel (Human Gate)
+
+Nur der Marken-Owner darf final freigeben bei: Score 5,0–5,5 · keine K6-Verletzung · aber K1 oder K2 = ⚠️.
+
+**Warum?** Das sind strategische Nuancen. Da darf der Agent nicht „entscheiden".
+
+> Agent empfiehlt. Owner entscheidet.
+
+---
+
+## 5. Explainability: Wie Ablehnungen begründet werden
+
+Jede Ablehnung muss enthalten: `rule_id` · `rule_text` (aus DNA/Guardrail) · `evidence` (Zitat + Position) · `fix_suggestion` (konkreter Vorschlag).
+
+**Beispiel:** `GR-TERM-001` Verbotener Begriff „ganzheitlich" · Evidence: Satz 2 · Fix: Ersetzen durch konkreten Scope („Governance", „Risiko", „Entscheidungen").
+
+---
+
+## 6. Audit-Log & Debugging (für dich als Entwickler)
+
+Jeder Validierungsrun speichert: Input · DNA-Version · Feature Flags (welche Checks aktiv) · Model-Version · Ergebnisse je Kriterium · Reifegrad je Baustein (Ebene 1) · Tokenverbrauch je Run (Kostenkontrolle).
+
+Damit: Bugs finden, Drift erkennen, Kosten optimieren, Kundenfragen beantworten („Warum abgelehnt?").
+
+---
+
+## 7. MVP-Umfang (minimal, aber stark)
+
+**Phase 1 MVP (empfohlen):**
+- K6 (verbotene Begriffe/Claims) deterministisch
+- K4 (Themen) Keyword + Embedding
+- K3 (Ton) deterministisch + einfacher LLM-Richter
+- K1/K2/K5 zunächst nur LLM-Richter (mit strukturiertem Prompt)
+- K7 Version-Ref
+- Ebene 1 (DNA-Reifegrad): Positionierung + Grenzregeln deterministisch, Rest LLM-Richter
+
+**Phase 2:** Embedding + LLM-Adjudication für K1/K2 · feinere Tonalitätsparameter · bessere Themenklassifikation · vollständiger Reifegrad über alle Bausteine.
+
+> MVP muss nicht perfekt sein, aber begründbar.
+
+---
+
+## 8. Sicherheit: Halluzinationen vermeiden
+
+Regel: Agent darf niemals Fakten erfinden. Agent darf nur: prüfen, umformulieren, Struktur vorschlagen.
+
+Wenn Kontext fehlt: „Unzureichende Informationen" als Status, kein Raten.
+
+---
+
+## 9. Essenz
+
+- Regeln deterministisch
+- Semantik hybrid
+- Grenzfälle menschlich
+- DNA-Reifegrad vor Inhalts-Prüfung
+- alles begründet und auditierbar
+
+> Der Marken-Agent ist kein Orakel. Er ist ein Prüfstand.
+
+---
+
+### Ende – Wissensdokument 011b (Version 1.2)
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_012.md

@@ -0,0 +1,304 @@
+# Wissensdokument 012 — Version 2.0
+
+### Wie Klarheit bepreist, skaliert und wirtschaftlich gesichert wird
+
+**Status:** Fixiert
+
+**Version:** 2.0 (ersetzt 1.0)
+
+**Gültig ab:** sofort
+
+**Zweck:** Monetarisierung des Systems *Marke macht.*
+
+**Rolle:** Verkauf · Erwartungsmanagement · Skalierung · Kostensicherung
+
+---
+
+### Änderungsvermerk (gemäß Dok. 000 §5.2)
+
+| Feld | Wert |
+| --- | --- |
+| Version | 1.0 → 2.0 (methodisch: Preislogik neu verankert) |
+| Datum | 27.05.2026 |
+| Begründung | Die Alt-Tarife waren auf Token-Kontingente und Output-Beispiele („100.000 Tokens ≈ 30 Posts") gestellt – ein Output-Frame, den Dok. 008 verbietet, der den ChatGPT-Vergleich einlädt und falsifizierbar ist. Zugleich verbot §9 (alt) bereits genau diese Token-Kommunikation: ein interner Widerspruch. v2.0 verankert die Tarife auf **Governance-Scope** (DNAs, Sitze, Governance-Tiefe), bildet Verbrauch als abstrahierte **Systemnutzung (0–100)** ab (intern aus Tokens umgerechnet, generierungsdominiert) und rechnet Mehrverbrauch über gedeckelte **Nutzungsblöcke** ab. **Preishöhen unverändert.** (Schlusszeile der Altfassung trug irrtümlich bereits „2.0" – bereinigt.) |
+| Betroffene Dokumente | Dok. 013 (zwei Wertstufen, DNA-Reifegrad), Dok. 005 v1.1 (Audit als Premium-Pfad), Dok. 011/011b v1.1 (DNA-Reifegrad), Dok. 008 (Output-Verbot) |
+| Entscheidung | Kevin Adametz (Letztinstanz, Dok. 000 §4.1) |
+
+---
+
+## 1. Grundsatz der Preislogik (oberste Regel)
+
+> Wir bepreisen nicht Output. Wir bepreisen Entscheidungsfähigkeit.
+
+Drei Prinzipien:
+
+1. **Klarheit ist der Eintritt** (Audit oder geführter Self-Service).
+2. **Governance-Umfang ist die Skalierung** (mehr DNAs, mehr Sitze, mehr Tiefe).
+3. **Nutzung verursacht echte Kosten und wird verursachungsgerecht abgerechnet** – aber abstrahiert, nie in Output-Stückzahl.
+
+### Die zwei Umsatzhebel (beide legitim)
+
+- **Scope-Hebel (Expansion):** ein Account wächst über Marken-DNAs, Sitze und Governance-Tiefe. Land-and-expand auf Governance.
+- **Intensitäts-Hebel (Verbrauch):** je aktiver die Marke bespielt wird, desto höher die Nutzung. Dominiert von der **Generierung** (größerer Treiber als die Prüfung). Das ist wirtschaftliche Realität und wird abgerechnet.
+
+### Die nicht verhandelbare Leitplanke
+
+> Die veröffentlichte Einheit und die Verkaufsstory sind **niemals Output-Menge.**
+
+Wir bepreisen **governed output capacity** – die Fähigkeit, beliebig viel *markenkonformen* Inhalt zu erzeugen, abgesichert durch Prüfung. Sobald die Einheit „Posts pro Euro" wird, sind wir im ChatGPT-Vergleich. Solange sie „Markenaktivität unter Kontrolle" heißt, sind wir es nicht.
+
+---
+
+## 2. Die Angebotsarchitektur
+
+Drei klar getrennte Ebenen:
+
+1. **Marken-Klarheits-Audit** – menschliches Handwerk, Premium-Pfad zur DNA
+2. **Brand Rules** – operative Marken-Infrastruktur (Abo)
+3. **adametz.media** – High-End-Entscheidungsbegleitung
+
+> Das Tool ist nicht der einzige Einstieg. Klarheit ist der Einstieg – über das Audit *oder* den geführten Self-Service (Dok. 013, Dok. 005 v1.1).
+
+---
+
+## 3. Angebot 1: Marken-Klarheits-Audit (Premium-Pfad)
+
+### Zweck
+
+Diagnose der Unklarheit, Fixierung der Marken-DNA v1.0, sprachliche Entscheidungsfähigkeit – durch einen Menschen.
+
+### Leistungsumfang (fix)
+
+Analyse des Ist-Zustands · vollständige Marken-DNA (5 Bausteine) · Validierung an realen Inhalten · klare Empfehlung (Details: Dok. 005).
+
+### Preisrahmen
+
+**2.500 – 5.000 € einmalig** (nach Unternehmensgröße, Komplexität, Anzahl Zielgruppen).
+
+### Positionierung
+
+Das Audit ist die **Premium-Ausfahrt** neben dem Self-Service (Dok. 013 §7, Dok. 005 v1.1), nicht der einzige Eingang. Wertanker:
+
+> Hier arbeitet ein echter Mensch, kein Algorithmus.
+
+In einem KI-überfluteten Markt ist das ein Differenzierer, kein Flaschenhals.
+
+---
+
+## 4. Angebot 2: Brand Rules – Marken-Infrastruktur
+
+### 4.1 Was bepreist wird
+
+Der Abo-Preis bepreist den **Governance-Layer**: die geführte, versionierte, geprüfte Marken-DNA als zentrale Wahrheit – plus die Fähigkeit, daraus markenkonformen Output zu erzeugen. Der Wert-Headline ist die **Markengesundheit**: DNA-Reifegrad (wie scharf ist die Marke?) und Konformitätsquote (wie treu bleibt der Output?), Dok. 011 v1.1.
+
+### 4.2 Die zwei Bestandteile jedes Tarifs
+
+1. **Scope** (preisbestimmend): Anzahl Marken-DNAs · Anzahl Sitze · Governance-Tiefe (Rollen, Freigaben, Audit-Log, Versionierung, DNA-Reifegrad, Multi-Marke).
+2. **Inkludierte Systemnutzung** (Fair-Use-Band): großzügig bemessen, qualitativ beschrieben, **nie in Tokens oder Stückzahl**. Mehrverbrauch über Nutzungsblöcke (§8).
+
+> Der Grundpreis bezahlt Klarheit und Kontrolle. Die Nutzung bezahlt die reale Rechenleistung – verursachungsgerecht, aber abstrahiert.
+
+---
+
+## 5. Brand Rules STARTER
+
+**Zielgruppe:** Solo-Unternehmer, Einzelberater, kleine Expertenmarken.
+
+### Leistung (Scope)
+
+- 1 Marken-DNA
+- 1 Nutzer
+- Generieren & Prüfen
+- DNA-Reifegrad
+- Basis-Anwendungsfälle
+
+### Preis
+
+**99 € / Monat**
+
+**Inkludierte Systemnutzung:** ausgelegt für fokussierte Einzelnutzung. Mehrverbrauch flexibel über Nutzungsblöcke (§8).
+
+### Positionierung
+
+> Für bewusste, fokussierte Nutzung. Kein Content-Spielplatz.
+
+---
+
+## 6. Brand Rules PRO
+
+**Zielgruppe:** Unternehmen, Marketing- & Vertriebsteams, Organisationen mit mehreren Stimmen.
+
+### Leistung (Scope)
+
+- 1 Marken-DNA
+- bis 5 Nutzer
+- Governance & Freigaben
+- Audit-Logs
+- DNA-Reifegrad
+- mehrere Anwendungsfälle
+
+### Preis
+
+**299 € / Monat**
+
+**Inkludierte Systemnutzung:** ausgelegt für aktive Team-Nutzung über mehrere Kanäle. Mehrverbrauch über Nutzungsblöcke (§8).
+
+### Positionierung
+
+> Markenführung im Team. Personenunabhängig. Kontrolliert.
+
+---
+
+## 7. Brand Rules ENTERPRISE (optional, Phase 3+)
+
+**Zielgruppe:** größere Organisationen, Partner-Setups, Multi-Marken-Strukturen.
+
+### Leistung (Scope)
+
+- mehrere Marken-DNAs
+- erweiterte Rollen & Rechte
+- individuelles Nutzungsband
+- optionale API / RAG-Erweiterungen
+- SLA / Support
+
+### Preis
+
+**ab ca. 999 € / Monat (individuell)**
+
+---
+
+## 8. Nutzungslogik & Anzeige (verbindlich)
+
+### 8.1 Die Mechanik: eine abstrahierte Leiste
+
+Verbrauch wird als **Systemnutzung von 0–100** angezeigt – eine Leiste, die sich bei Nutzung füllt. In sie fließen **beide Treiber**: Generierung (dominierend) und DNA-Operationen. Intern werden die real verbrauchten Tokens auf diese Einheit umgerechnet; **die Anzeige steht in keiner veröffentlichten Relation zu Tokens.**
+
+Das interne Umrechnungsverhältnis (Tokens → Nutzungseinheit) ist der **Stellknopf gegen Preisschwankungen**: Fällt der Modellpreis, gibt es pro Einheit mehr Leistung – ohne dass ein veröffentlichter Tarif angefasst wird.
+
+**Nebeneffekt (Missbrauchsschutz):** Wer ständig an seiner DNA herumbastelt, füllt dieselbe Leiste wie der Vielgenerierer. „Bastler" und „Vielnutzer" müssen nicht unterschieden werden – jeder Verbrauch kostet gleich viel und wird ökonomisch gleich behandelt. Eine Leiste genügt.
+
+### 8.2 Die Anzeige-Hierarchie (Kontrollraum, kein Verbrauchszähler)
+
+1. **Hero: Markengesundheit** – DNA-Reifegrad und Konformitätsquote zuerst. Governance führt.
+2. **Darunter: Systemnutzung 0–100** – mit Reset-Datum und Warnung bei 80 %.
+3. **Darunter: Nutzungsblöcke** – gedeckelter Mehrverbrauch (§8.3).
+
+> Der Kontrollraum zeigt zuerst, ob die Marke scharf ist – erst dann, wie viel Energie das gekostet hat.
+
+**Verbrauch an Wert koppeln.** Die Leiste zeigt nicht nur „X % verbraucht" (das fühlt sich nach Schwund an), sondern daneben, *was daraus entstanden ist*: geprüfter, markenkonformer Output. Verbrauch, der sichtbar Wert geschaffen hat, fühlt sich verdient an.
+
+### 8.3 Mehrverbrauch (echtes Geld, kontrolliert)
+
+Über das inkludierte Band hinaus: benannte **Nutzungsblöcke**, automatisch zugeschaltet, mit einem **vom Nutzer gesetzten Ausgabenlimit** („Limit anpassen"). Hier darf konkret in Euro gerechnet werden – es ist reales, abgerechnetes Geld. **Nie in Tokens.**
+
+- keine harte Sperre
+- Restkontingent sichtbar
+- Warnung bei 80 %
+- Mehrverbrauch nur bis zum selbst gesetzten Limit
+
+> Kontrolle statt Überraschung.
+
+### 8.4 Die ehrliche Linie
+
+Mehr Umfang, mehr Tiefe, mehr Output → die Leiste füllt sich schneller. Das wird transparent gezeigt.
+
+> Wer schneller fährt, verbraucht mehr. Das ist ehrlich – und es gilt für den Zähler, nicht für die Story.
+
+---
+
+## 9. Kommunikationsregel zur Nutzung
+
+### Was extern **nicht** kommuniziert wird
+
+- „Tokens", „Credits", „Pay per Token"
+- „KI-Kosten" oder technische Details
+- Output-Stückzahl („X Posts pro Monat")
+- Euro im *inkludierten* Band
+
+### Was kommuniziert wird
+
+- „Systemnutzung" / „Markenaktivität"
+- „skaliert mit Ihrem Bedarf"
+- „faire Zusatznutzung über Nutzungsblöcke, bis zu Ihrem Limit"
+
+**Beispiel:**
+
+> „Jeder Tarif enthält ein großzügiges Nutzungsband. Wird es aktiver, schalten Sie flexibel Nutzungsblöcke hinzu – bis zu einem Limit, das Sie selbst bestimmen. Ohne Tarifwechsel."
+
+Sachlich. Ruhig. Nicht rechtfertigend.
+
+---
+
+## 10. Angebot 3: adametz.media – High-End-Begleitung
+
+### Zweck
+
+Komplexe Marken- & Führungsentscheidungen · Übergangsphasen · Sonderfälle.
+
+### Abrechnung
+
+Projektbasiert, kein Retainer, keine Pauschalpakete.
+
+### Preisrahmen
+
+**15.000 – 50.000 €+ pro Projekt** (nach Tiefe, Organisationskomplexität, Dauer).
+
+> adametz.media ist keine Upsell-Stufe, sondern eine eigene Kategorie.
+
+---
+
+## 11. Anschluss an das Partner-Modell (Referenz Dok. 009)
+
+### Partner verdienen an
+
+- Audit-Durchführung (fester Anteil)
+- Brand Rules Revenue Share (20–30 %)
+  - 20 % ohne Audit-Berechtigung, 30 % mit Audit-Berechtigung
+
+### Partner zahlen
+
+- Zertifizierungsgebühr (z. B. 3.000 € einmalig)
+- optionale Re-Zertifizierung
+
+### Schutz
+
+- keine White-Label-Nutzung
+- keine Methodenlizenz
+- klare Vertragsbindung
+
+---
+
+## 12. Typische Einwände & klare Antworten
+
+**„Warum kostet das mehr als andere KI-Tools?"**
+→ Weil es keinen Content verkauft, sondern eine *geführte, geprüfte Marke*. Du zahlst nicht für Output, sondern für Output, dem du nicht hinterherprüfen musst.
+
+**„Wie viele Posts bekomme ich für mein Geld?"**
+→ Falsche Frage. Du bekommst die Fähigkeit, beliebig viel *markenkonformen* Inhalt zu erzeugen, abgesichert durch Prüfung – kontrolliert über ein Nutzungsband. Stückzahl ist nicht die Maßeinheit.
+
+**„Warum sehe ich keine genaue Token- oder Stückzahl?"**
+→ Weil eine feste Zahl bei jeder Modellpreis-Änderung brechen würde. Die Systemnutzung zeigt deinen Verbrauch transparent, ohne dich an eine Zahl zu binden, die morgen nicht mehr stimmt.
+
+**„Warum ist Nutzung begrenzt?"**
+→ Sie ist nicht begrenzt – sie skaliert. Das Band ist großzügig, Mehrverbrauch schaltest du selbst zu, bis zu deinem eigenen Limit.
+
+**„Können wir das Audit überspringen?"**
+→ Ja – über den geführten Self-Service, wenn eure Markensubstanz das trägt (Dok. 013). Das Audit ist für die komplexen Fälle und für das menschliche Handwerk.
+
+---
+
+## 13. Essenz (komprimiert)
+
+- Klarheit ist der Eintritt (Audit oder Self-Service)
+- Governance-Umfang ist die Skalierung
+- Nutzung ist ein realer, abstrahierter Kostenfaktor – nie Output-Stückzahl
+- Generierung treibt den Verbrauch, Governance trägt den Wert
+- Entscheidungen sind das Produkt
+
+> Wir verkaufen keine KI. Wir verkaufen Führungsfähigkeit.
+
+---
+
+### Ende – Wissensdokument 012 (Version 2.0)
+
+---

docs/00_Methodik-Verfassung/Wissensdokument_013.md

@@ -0,0 +1,205 @@
+# Wissensdokument 013
+
+Bis hierher beschreiben die Dokumente, *was* Marke ist (001/002), *wie* sie entsteht (003), *womit* sie operativ wird (004/008/011) und *worüber* öffentlich gesprochen wird (006/007/009). Was fehlte: die Brücke zwischen Resonanz und Entscheidung. Dieses Dokument schließt sie.
+
+---
+
+## Akquise- & Conversion-Logik
+
+### Die Klarheits-Auffahrten: von Resonanz zu Entscheidung
+
+**Status:** Fixiert
+
+**Version:** 1.0
+
+**Zweck:** Definition des Wegs vom öffentlichen Denkraum zur bezahlten Leistung – ohne Verwässerung, ohne Manipulation
+
+**Rolle im System:** Anwendung · Conversion · Selbstdiagnose
+
+**Stellung in der Hierarchie:** Ebene 009+ (Erweiterung/Anwendung), nachrangig zu Dok. 000–008. Widerspricht der Diagnose (001) nicht; schließt eine Lücke gemäß Dok. 000 §10.
+
+---
+
+## 1. Das Grundproblem (die Hantel)
+
+Das System hatte bisher zwei Enden und keine Mitte:
+
+- **oben:** kostenlose, konfrontative Inhalte (Dok. 007/009)
+- **unten:** das Marken-Klarheits-Audit, 2.500–5.000 € (Dok. 005/012)
+- **dazwischen:** nichts
+
+Eine Hantel, keine Verbindung. Die Erfolgsmetriken (Dok. 007) messen *intellektuelle Resonanz* („so habe ich das nie gesehen"), nicht *kommerzielle Absicht*. Man kann jede dokumentdefinierte Metrik gewinnen und trotzdem keine Pipeline haben.
+
+> Aufmerksamkeit ohne nächste Stufe verdampft.
+
+---
+
+## 2. Der entscheidende Widerspruch
+
+Der Kauf des Audits ist **selbst ein Verständniskauf** (Dok. 001, Abschnitt 3): hohe Investition, intangibles Ergebnis, Risiko, lange Überlegung.
+
+Was sagt die eigene Methode über den Verständniskauf? Der Käufer muss **verstehen, bevor er handelt** – inkrementell, risikoarm, mit Beleg.
+
+Die Hantel verlangt das Gegenteil: einen Sprung von 0 € auf 2.500 € auf einmal – einen Gewohnheitskauf-Reflex (sehen → kaufen) für ein hochinvolviertes Produkt.
+
+> Der bisherige Funnel verletzt die eigene These. Das ist kein externer Vorwurf, sondern ein interner Widerspruch.
+
+---
+
+## 3. Die Umdeutung (keine Leiter, sondern Auffahrten)
+
+Es braucht **keinen Funnel** im Hype-Sinn. Das Markenversprechen verbietet *Manipulation*, nicht *Struktur*.
+
+Zwei Korrekturen am Bild:
+
+1. **Keine Leiter.** Inbound läuft nicht linear Stufe für Stufe. Realistisch sind **mehrere Auffahrten, die auf denselben Punkt zulaufen** – das Angebot. Provokation, Denkraum-Essay, Selbst-Diagnose, Referenzfälle sind Eingänge in beliebiger Reihenfolge, keine Sequenz.
+2. **Diagnostisch, nicht persuasiv.** Jede Auffahrt ist selbst ein Beweis von Klarheit, kein Lead-Magnet. Keine Stufe wird bestochen, keine unter Druck gesetzt. Jede konfrontiert den Interessenten mit seiner eigenen Klarheitslücke und lässt ihn fahren, wenn er bereit ist.
+
+> Struktur ist erlaubt. Bestechung nicht.
+
+---
+
+## 4. Das Kernmodell: ein Mechanismus, drei Intensitäten
+
+Klarheit ist **eine Leistung** in einem Kontinuum, unterschieden nicht nach Reihenfolge, sondern danach, **wer die Arbeit und das Urteil leistet**.
+
+| Form | Wer urteilt | DNA-Status | Skaliert über |
+| --- | --- | --- | --- |
+| **Selbst-Diagnose** | das System | keine DNA | Automatisierung (ohne Kevin) |
+| **Self-Service-DNA** | der Kunde, vom Tool gezwungen | DNA wird erstellt | Tool + KI |
+| **Audit (Premium)** | ein Mensch (Handwerk) | DNA wird festgelegt | menschliche Expertise |
+| **Tool laufend** | das System gegen die DNA | DNA wird angewandt | Score |
+
+Der verbindende Faden: Es ist **derselbe Mechanismus in drei Intensitäten** – die Lücke zwischen dem, was gesagt wird, und dem, was Klarheit verlangt, gemessen mit **wachsendem Kontext**:
+
+- **Symptom-Erkennung** (vor dem Kauf, ohne DNA)
+- **DNA etabliert** (durch Self-Service oder Audit)
+- **Score gegen DNA** (im Tool laufend)
+
+Deshalb fühlt der Interessent schon in der Selbst-Diagnose den Mechanismus, für den er später zahlt.
+
+---
+
+## 5. Die Selbst-Diagnose (Symptom-Schicht)
+
+**Funktion:** das abstrakte Problem persönlich und unausweichlich machen.
+
+Sie ist **nicht die Scorecard.** Der Interessent hat noch keine DNA. Sie misst daher nur **DNA-unabhängige Signale** – die *Abwesenheit* von Klarheit, nicht die Konformität mit einer Identität:
+
+- austauschbare Begriffe
+- Floskeln und „wir helfen Ihnen"-Sprache
+- Vagheit / fehlende Entscheidungsfähigkeit
+- Superlative ohne Substanz
+
+**Framing-Regel (entscheidend):** nicht „das ist *falsch*", sondern „hier *fehlt* etwas" – benannt in den Begriffen des Konzepts (Klarheit, Abgrenzung, Schärfe). Sie zeigt das Symptom präzise, benennt dann, dass die **Ursache strukturell** ist – nicht durch Umschreiben dieser Wörter behebbar, sondern nur durch eine definierte DNA.
+
+> Das hier ist die Spitze des Eisbergs. Die Lösung ist kein Texttrick.
+
+**Konfrontation absichern durch Konkretheit.** Persönliche Kritik landet härter als allgemeine Provokation. Schutz gegen Abwehr ist Unbestreitbarkeit: nicht „Ihre Marke ist schwach" (Meinung, angreifbar), sondern „diese 7 Begriffe verwenden auch Ihre drei direkten Wettbewerber wörtlich" (Fakt, vernichtend).
+
+**Drei eigenständige Instrumente für drei Stadien:** Symptom-Detektor (vor dem Kauf) · Audit/Self-Service (etabliert die DNA) · Scorecard (erzwingt sie im Tool). Der Symptom-Detektor ist **sofort baubar**, ohne dass eine DNA oder das fertige Tool existieren muss.
+
+---
+
+## 6. Der zweischichtige Score (Kern des Self-Service-Vertrauens)
+
+Das eigentliche Engineering-Problem im Self-Service ist die **Fehler-Zuschreibung**: Schwache Ausgabe muss der Nutzer der *eigenen Eingabe* zuschreiben, nicht dem Tool. Gelingt das nicht, denkt er „funktioniert nicht" und ist weg.
+
+Lösung: zwei getrennte Schichten.
+
+**Schicht 1 – DNA-Reifegrad.** Das Tool bewertet die **DNA selbst**, Baustein für Baustein, gegen Dok. 002: Ist die Abgrenzung ein echter Ausschluss oder nur „wir sind flexibel"? Sind die Tonregeln negativ definierbar? Führt jeder Baustein zu einer klaren Entscheidung? Inhaltsunabhängig. Frage: *Wie scharf ist deine Referenz?*
+
+**Schicht 2 – Inhalts-Konformität.** Erst hier: Passt ein Text zur DNA? (die eigentliche Scorecard, Dok. 011)
+
+**Die Kopplung (Zuschreibung nach oben).** Fällt die Konformitätsprüfung schwach aus, *weil* der zugrunde liegende Baustein unscharf ist, schreibt das Tool das **nach oben zu** – mit konkretem Fingerzeig:
+
+> „Diese Prüfung ist unsicher, weil deine Abgrenzung (Baustein 2) nicht trennscharf definiert ist."
+
+Nicht „du hast keine Ahnung". Nicht „buch ein Audit". Sondern: *hier* ist etwas unterdefiniert – in den Begriffen der eigenen DNA. Das ist die Kausalkette aus Dok. 011b, sichtbar gemacht. Ohne sie schiebt der Nutzer die Schuld aufs Tool. Mit ihr auf die eigene Eingabe.
+
+---
+
+## 7. Selbst-Erkenntnis ohne Verkaufsdruck
+
+Es ist exakt die Logik aus Dok. 003: *Der Experte denkt nicht für den Kunden – er zwingt ihn, selbst klar zu denken.* Das Tool tut dasselbe.
+
+- **Nutzer mit Expertise** liest „Abgrenzung unscharf", schärft nach, der Reifegrad steigt → echter Gewinn, Self-Service genügt.
+- **Nutzer ohne Expertise** versucht es, kriegt es nicht scharf, liest wieder „noch unterdefiniert" → kommt **selbst** zum Schluss, dass es allein nicht geht.
+
+> Das Tool sagt nie „Audit". Der Mensch erarbeitet sich die Erkenntnis.
+
+Self-Service ist damit **nicht zwingend**. Wer Expertise hat, dessen Ergebnis performt. Das Audit ist die Premium-Ausfahrt für die, die das menschliche Handwerk brauchen – „hier arbeitet ein echter Mensch, kein Algorithmus" ist in einem KI-überfluteten Markt ein **Differenzierer**, kein versteckter Flaschenhals.
+
+---
+
+## 8. Routing: pro Baustein, nicht pro Person
+
+Niemand ist ganz Experte oder ganz Laie. Die meisten sind **teil-kompetent** – scharf im Identitätskern, vage in der Abgrenzung.
+
+Daher läuft das Routing **pro Baustein**, nicht pro Person. Ein überwiegend fähiger Nutzer macht das meiste selbst und braucht den Menschen nur für den einen Baustein, den er nicht scharf bekommt. Das ist ehrlicher und maximiert den Self-Service-Anteil – also die Kalender-Entlastung.
+
+**Routing-Kriterium** (das Spektrum aus Dok. 001, Abschnitt 3, pro Baustein):
+
+- geringe Erklärungslast · wenige Stimmen · kein innerer Widerspruch → **Self-Service-DNA**
+- hohe Komplexität · viele Stimmen · politisch → **Mensch / Audit**
+
+---
+
+## 9. Die Kalibrierungsfalle
+
+Zu viele rote Hinweise *sind* das „Tool kaputt"-Erlebnis. Ein Nutzer, der bei jedem Baustein „unterdefiniert" liest, fühlt sich nicht geführt, sondern abgewiesen.
+
+Zwei Schutzregeln:
+
+1. **Symptom plus Maßstab, nie Substanz.** Jeder Gap wird mit dem *Standard* gepaart – das Tool zeigt, *was* eine scharfe Abgrenzung leisten muss (Kriterium und Testfrage aus Dok. 002), aber es **schreibt sie nicht**. Sonst kannibalisiert es das Audit und verletzt „KI erfindet keine Marke" (Dok. 004).
+2. **Reifegrad als steigende Zahl.** Fortschritt sichtbar machen, nicht Versagen. Eine Klarheit, die man wachsen sieht, hält bei der Stange. Eine, die nur Mängel listet, vertreibt.
+
+---
+
+## 10. Guardrails (Konsistenz mit dem System)
+
+- **KI erfindet keine Marke (Dok. 004).** Das Tool *extrahiert und strukturiert* die DNA aus den Eingaben des Kunden – es erfindet sie nicht. Der Mensch liefert Parameter und Urteil. An der Urteilswand routet das Tool zum Menschen.
+- **Wert vor Erfassung (Dok. 006).** Das Diagnose-Ergebnis ist sofort und vollständig sichtbar, ohne Gate. Eine E-Mail ist nur optional für eine vertiefte Version. Kein Newsletter-Zwang.
+- **Phasenkonform (Anhang 007 v1.1).** Die Selbst-Diagnose ist ein **markemacht.de-Denkwerkzeug**, kein Feature von Brand Rules. Sie zeigt die Logik (Konfrontation mit der eigenen Unklarheit), ohne das Produkt zu nennen – sauber im M0/M1-Korridor.
+- **Verifikation vor Generierung (Dok. 008).** Der mitlaufende Score behauptet nie Perfektion. Das hält das Tool epistemisch ehrlich und ist ein eingebauter Grund, dranzubleiben oder den Menschen zu holen.
+
+---
+
+## 11. Minimal sinnvolle Version (MVP der Akquise)
+
+Nicht „bau alle Auffahrten". Zwei Dinge zuerst:
+
+1. **Referenzfälle öffentlich machen (Dok. 010).** Fast kein Bauaufwand, sofort Beweis – die „DNA-konform vs. DNA-Verletzung"-Beispiele drehen Skeptiker. Anonymisiert, aus der internen Schublade in die Öffentlichkeit.
+2. **Symptom-Detektor als Denkwerkzeug.** Echter Bau, aber das Stück, das personalisiert, abfängt und de-riskt – und das ohne Kevins Zeit läuft.
+
+Alles Weitere ist Kür.
+
+---
+
+## 12. Anschluss an die Preislogik (Dok. 012)
+
+Aus diesem Modell entstehen **zwei echte bezahlte Wertstufen mit verschiedenem Charakter**:
+
+- **Self-Service-System** (Tool, skaliert ohne den Menschen)
+- **menschliches Handwerk** (Audit, Premium)
+
+Das ist eine sauberere Preisgeschichte als die Token-Mengen-Logik. → Auflösung in Dok. 012 (offener Punkt 5).
+
+---
+
+## 13. Essenz
+
+- Die Mitte fehlte, nicht die Enden.
+- Der Audit-Kauf ist selbst ein Verständniskauf – die Akquise muss derselben Logik folgen.
+- Auffahrten statt Leiter. Diagnostisch statt persuasiv.
+- Ein Mechanismus, drei Intensitäten – Symptom, DNA, Score.
+- Der zweischichtige Score schreibt Schwäche der Eingabe zu, nicht dem Tool.
+- Das Tool sagt nie „Audit". Der Mensch erarbeitet sich die Erkenntnis.
+
+> Klarheit wird zur Leistung. Wer sie selbst herstellen kann, tut es. Wer nicht, sieht warum.
+
+---
+
+### Ende – Wissensdokument 013
+
+---

docs/00_Methodik-Verfassung/X-Keyvisual-Briefing_Visuelles_Brand-System.md

@@ -0,0 +1,348 @@
+# Keyvisual-Briefing / Visuelles Brand-System
+
+1. **Keyvisual-Briefing** (für Designer, Fotografen, 3D, KI-Artists)
+2. **Visuelles Brand-System** (als dauerhaftes Regelwerk)
+
+Beides ist **direkt umsetzbar**.
+
+---
+
+# 1. KEYVISUAL-BRIEFING
+
+## „Der Monolith als Ordnungsanker“
+
+### Zweck des Keyvisuals
+
+Das Keyvisual ist **kein Bild zur Dekoration**, sondern ein **visueller Beweis** für das Markenversprechen:
+
+> Klarheit existiert.Sie ist unverrückbar.Sie ordnet.
+> 
+
+Das Bild muss **führen**, nicht gefallen.
+
+---
+
+## 1.1 Zentrale Bildidee (fix)
+
+**Ein reduzierter, geometrischer Monolith**
+
+– ruhig, schwer, präzise –
+
+der **nicht erklärt**, sondern **gesetzt** ist.
+
+Nicht:
+
+- Symbol
+- Metapher
+- Story
+
+Sondern:
+
+- **Referenzpunkt**
+
+---
+
+## 1.2 Semantische Bedeutung (für Kreative)
+
+Der Monolith steht für:
+
+- Marken-DNA
+- Regelwerk
+- Entscheidung
+- Unverrückbarkeit
+
+Er steht **nicht** für:
+
+- Macht
+- Überlegenheit
+- Erlösung
+- Technologie
+- KI
+
+> Der Monolith ist keine Antwort.Er ist der Maßstab.
+> 
+
+---
+
+## 1.3 Bildkomposition – verbindliche Regeln
+
+### Perspektive
+
+- frontal oder leicht orthogonal
+- keine dramatischen Untersichten
+- keine Heldenperspektive
+
+👉 **Augenhöhe oder leicht darüber**
+
+### Sichtbarkeit
+
+- niemals vollständig erklärt
+- angeschnitten, fragmentiert oder teilweise verdeckt
+- Monolith darf den Bildrand schneiden
+
+### Platzierung
+
+- nie mittig
+- bevorzugt links oder rechts im Raster
+- immer mit **viel Negativraum**
+
+---
+
+## 1.4 Materialität & Textur
+
+**Materialanmutung:**
+
+- Beton
+- Basalt
+- mattes Metall
+- dunkler Stein
+
+**Oberfläche:**
+
+- nicht glänzend
+- nicht futuristisch
+- leicht unregelmäßig
+
+👉 Industrie, nicht Sci-Fi.
+
+---
+
+## 1.5 Licht & Kontrast
+
+- hartes, gerichtetes Licht
+- klar definierte Kanten
+- keine weichen Verläufe
+- keine Farbstimmungen
+
+Akzentlicht **nur**, um Struktur sichtbar zu machen –
+
+nicht um Emotion zu erzeugen.
+
+---
+
+## 1.6 Farbeinsatz im Keyvisual
+
+- Grundton: Schwarz / sehr dunkles Grau
+- Akzent: **Electric Cobalt** extrem sparsam
+    - Linie
+    - Kante
+    - Reflex
+
+> Farbe ist Signal, nicht Stimmung.
+> 
+
+---
+
+## 1.7 Bildvarianten (Pflicht)
+
+Jedes Keyvisual muss in **drei funktionalen Varianten** existieren:
+
+1. **Hero-Version**
+    - stark reduziert
+    - maximaler Negativraum
+2. **Editorial-Version**
+    - mehr Kontext
+    - Raster sichtbar
+3. **Detail-Version**
+    - Textur
+    - Kante
+    - Ausschnitt
+
+---
+
+## 1.8 Bildsprache – Do & Don’t
+
+### DO
+
+- ruhig
+- schwer
+- klar
+- minimal
+
+### DON’T
+
+- Menschen
+- Gesichter
+- Symbolik
+- Lichtstrahlen
+- Nebel-Drama
+- „epische“ Inszenierung
+
+---
+
+## 1.9 Einsatzkontexte
+
+- markemacht.de → Hero & Editorial
+- Pitch-Deck → Detail & Fragment
+- LinkedIn → Ausschnitt / Crop
+- Brand Rules → abstrahiert (Raster / UI)
+
+---
+
+### Visuelle Referenzrichtung (abstrakt)2. VISUELLES BRAND-SYSTEM
+
+![Image](https://www.artvistagallery.com/cdn/shop/files/1112_83bce506-2480-4bbd-874c-b0e43a044445.jpg?v=1735358435&width=2000)
+
+![Image](https://mymodernmet.com/wp/wp-content/uploads/archive/RAFcNMpsM3vYNXo2w9Qj_1082129376.jpeg)
+
+![Image](https://surfacegroup.com/cdn/shop/files/CCIIML-CONPROJ-12DGLP-product_img_3906fbd6-5b8c-42d1-8f69-085419db4660.jpg?v=1744035367&width=2048)
+
+![Image](https://lennekevandergoot.nl/images/workimages/252/f6/Black%20Monolith%20%28Grid%29%2C%2040%20x%2040%20cm%2C%20litho%2C%20pastel%2C%20potlood%20en%20collage%20op%20papier%2C%202020.JPG)
+
+---
+
+## „Ordnung sichtbar machen“
+
+---
+
+## 2.1 Gestaltungsprinzip (oberste Regel)
+
+> Reduktion ist kein Stil.Sie ist Konsequenz.
+> 
+
+Alles, was nicht zur Orientierung beiträgt, wird entfernt.
+
+---
+
+## 2.2 Farbwelt (fixiert)
+
+| Rolle | Farbe | Zweck |
+| --- | --- | --- |
+| Primär | Monolith Black #0A0A0A | Ruhe, Gewicht |
+| Sekundär | Concrete Grey #E5E5E5 | Sachlichkeit |
+| Akzent | Electric Cobalt #2E5BFF | Signal, Fokus |
+| Neutral | Pure White #FFFFFF | Klarheit |
+
+**Regeln:**
+
+- Schwarz dominiert
+- Blau maximal 5–10 %
+- Keine Farbverläufe
+
+---
+
+## 2.3 Typografie (funktional, nicht modisch)
+
+### Headline
+
+- geometrische Grotesk
+- breit, stabil
+- wenig Schnitte
+
+→ Wirkung: **Unverrückbar**
+
+### Fließtext
+
+- Inter (oder vergleichbar)
+- hohe Lesbarkeit
+- sachlich
+
+### Code / System
+
+- Monospace (JetBrains Mono o. ä.)
+- sparsam einsetzen
+
+**Typo-Regel:**
+
+- keine Verspieltheit
+- keine Kontraste um der Kontraste willen
+
+---
+
+## 2.4 Raster & Layout
+
+**Grundstruktur:**
+
+- strenges Grid
+- klare Spalten
+- großzügige Ränder
+
+Der Monolith „sitzt“ **im Raster**,
+
+nicht darüber.
+
+> Ordnung ist sichtbar, auch wenn man sie nicht erklärt.
+> 
+
+---
+
+## 2.5 Bild-Text-Beziehung
+
+- Text erklärt **nicht** das Bild
+- Bild illustriert **nicht** den Text
+
+Beides existiert **parallel**.
+
+---
+
+## 2.6 UI-Prinzipien (Brand Rules)
+
+- Dark Mode als Default
+- klare Zustände (aktiv / inaktiv)
+- keine Animation ohne Funktion
+- Feedback ist sachlich, nicht verspielt
+
+> Das UI fühlt sich an wie ein Kontrollraum, nicht wie ein Dashboard.
+> 
+
+---
+
+## 2.7 Umgang mit Logo & Zeichen
+
+- Logo niemals dekorativ
+- immer funktional platziert
+- kein Pattern
+- kein Watermarking
+
+Das Zeichen ist:
+
+- Signatur
+- Abschluss
+- Referenz
+
+---
+
+## 2.8 Visuelle No-Gos (absolut)
+
+❌ Stockfotos
+
+❌ Menschen in Interaktion
+
+❌ Icons zur Erklärung
+
+❌ Farbverläufe
+
+❌ emotionale Bildsprache
+
+❌ „moderne“ Spielereien
+
+---
+
+## 2.9 Konsistenz über alle Marken
+
+| Marke | Visuelle Rolle |
+| --- | --- |
+| markemacht.de | Denkraum / Ordnung |
+| Brand Rules | System / Kontrolle |
+| adametz.media | Mensch / Autorität |
+
+Der Monolith:
+
+- stark bei markemacht
+- abstrahiert bei Brand Rules
+- reduziert bei adametz
+
+---
+
+## 3. Essenz (für jedes Briefing)
+
+> Wir gestalten keine Marke.Wir machen Klarheit sichtbar.
+> 
+
+Wenn ein visuelles Element:
+
+- Aufmerksamkeit sucht → raus
+- erklären will → raus
+- gefallen will → raus
+
+---

docs/10_Quellen-Original/Sharp_How-Brands-Grow/_Quellnachweis.md

@@ -0,0 +1,28 @@
+# Quellnachweis — Sharp „How Brands Grow"
+
+**Strang:** `MW-HBG-xxx` (empirisch-mechanischer Gegenpol)
+
+|Feld|Wert|
+|---|---|
+|Autor|Byron Sharp (Ehrenberg-Bass Institute)|
+|Titel|How Brands Grow — _What Marketers Don't Know_|
+|Verlag|Oxford University Press (OXFORD = Trademark der OUP, UK u. a.)|
+|Erstveröffentlichung|2010 (Hardback), Nachdrucke 2010, 2011, 2012|
+|Verarbeitete Fassung|**Revised e-Book version 2014**|
+|Copyright|© Byron Sharp 2010|
+|ISBN|978-0-19-557356-5 (pbk)|
+|Katalog|National Library of Australia, Cataloguing-in-Publication|
+|Status der Bestätigung|**Am Original-Titelblatt bestätigt** (Screenshot 2026-05-21)|
+
+## Provenienz
+
+- Vorliegende Fassung: **E-Book-Originalfassung (Revision 2014)** — nicht die Erstausgabe 2010.
+- Die im Projekt verwendeten Markdown-Dateien (`how_brands_grow_chapter_01–14_de`) sind **verlustfreie, ins Deutsche übersetzte Textauszüge** des E-Book-Originals, ausschließlich zur Übergabe in den Arbeits-Chat extrahiert.
+- Datierungshinweis für alle MW-HBG-Dokumente: Quellfassung **2014**; Einzelzahlen als Größenordnung lesen.
+
+## Verwendung im Projekt
+
+- Verarbeitet zu `20_Markenwissen/Sharp_MW-HBG/Markenwissen_MW-HBG-001.md` … `MW-HBG-013.md` (vollständiges Buch inkl. Gesetzes-Register Kap. 13 + FAQ Kap. 14).
+- Rolle: empirisch-mechanischer Gegenpol; liefert das messbare Ende der Kausalkette (Verfügbarkeit/Marktanteil als Wirkung).
+- Geltungsbereich-Vorbehalt: FMCG-Empirie; B2B-Geltungsanspruch (Kap. 14) ist unbelegt — mechanische Ebene gilt, Bedeutungsebene folgt anderer Logik.
+- Copyright-Regel: paraphrasieren, keine Volltext-Reproduktion; Zitate kurz und gekennzeichnet.

docs/10_Quellen-Original/Sharp_How-Brands-Grow/how_brands_grow_chapter_10_de.md

@@ -0,0 +1,193 @@
+# Kapitel 10: Was Preisaktionen wirklich bewirken
+
+**John Dawes & John Scriven**
+
+Preisaktionen haben einen unmittelbaren und positiven Effekt auf Verkäufe. Aber der Effekt hält nicht an; er endet, wenn der Preisnachlass endet. Das liegt daran, dass Preisaktionen weitgehend Kund:innen belohnen, die die rabattierte Marke bereits in der Vergangenheit gekauft haben – und die das Glück haben, sie gerade im Angebot zu finden. Preisaktionen verändern die zugrunde liegenden Kaufneigungen für die Zukunft nicht; ihnen fehlt Reichweite, und sie bringen normalerweise keine neuen Kund:innen zu einer Marke.
+
+## Einführung
+
+Ein Buch über die Gesetzmäßigkeiten des Marketings und des Kaufverhaltens wäre nicht vollständig, ohne über Preis zu sprechen. Dieses Kapitel zeigt die gesetzesähnlichen Muster darin, wie Konsument:innen auf Preisänderungen reagieren – insbesondere darauf, wie temporäre Preisnachlässe Kaufverhalten, Verkäufe und Gewinne beeinflussen.
+
+## Preis ist nicht alles
+
+Preis ist eine starke Variable im Marketing-Mix. Er ist wohl das am leichtesten veränderbare Element eines Produkts und hat den größten direkten Effekt auf Verkäufe. Preis ist für Konsument:innen offensichtlich wichtig und wird oft als wichtigster Faktor betrachtet. Dennoch sind Markenführer fast nie die billigsten. Nicht alle Käufer:innen wechseln, wenn eine teurere Marke günstiger wird. Preis ist also nicht alles. Wie reagieren Konsument:innen auf Preis und Preisänderungen, und warum verhalten sie sich so?
+
+Dieses Kapitel kommentiert hauptsächlich, was passiert, wenn der Preis einer etablierten Marke vorübergehend verändert wird, zum Beispiel bei einer Preisaktion. Wir werden den Prozess der Preisfestsetzung nicht diskutieren. Wichtig ist jedoch, im Kopf zu behalten, dass jede Marke einen „normalen“ Preis hat, der die Qualität der Marke widerspiegelt – mit etwas Variation je nachdem, wie viel verfügbar ist, also Angebot, und mentaler und physischer Verfügbarkeit, also Nachfrage. Die meisten Kategorien haben Preis-/Qualitätsstufen: die günstige bzw. einfache Stufe ohne Zusatzleistungen, die Mainstream-Stufe und die Stufe höherpreisiger Produkte mit zusätzlichem Luxus oder zusätzlicher Funktionalität. Konsument:innen kennen dieses Stufensystem. Deshalb ist es wichtig, den Kontext zu berücksichtigen, wenn man bewertet, welche Preise Menschen zu zahlen bereit sind. Es ist offensichtlich, dass Konsument:innen für Qualität bezahlen: Die Preise höherwertiger Marken sind höher als die Preise niedrigerwertiger Marken, und höherwertige Marken schneiden Jahr für Jahr gut ab. Wir sehen außerdem, dass die allerbesten Marken im Allgemeinen deutlich teurer sind und die allerbilligsten Marken häufig deutlich geringere Qualität haben. Wenn man wirklich Qualität will, muss man dafür bezahlen; wenn man einen niedrigen Preis will, muss man andere Opfer bringen.
+
+Wir untersuchen nun diese Fragen: Wie verhalten sich Konsument:innen in Bezug auf Preis? Gibt es „Deal Buyers“ und „Premium Buyers“? Außerdem skizzieren wir die Managementmotivation für Preisaktionen und zeigen, was tatsächlich passiert, wenn Preisaktionen durchgeführt werden. Die Frage längerfristiger Effekte – guter oder schlechter – wird ebenfalls behandelt. Schließlich diskutieren wir die Fähigkeit von Preisaktionen, Käufer:innen tatsächlich zu erreichen.
+
+## Konsument:innen kaufen über eine Bandbreite von Preisniveaus hinweg
+
+Marketer und Forschende finden es verlockend, Käufer:innen danach zu kategorisieren, welche Preise sie zahlen. Man nimmt zum Beispiel an, es gebe Low-End-Shopper, solche, die im mittleren Bereich kaufen, und andere, die Premiumprodukte kaufen. Die Vorstellung vom „deal-prone“ Shopper verstärkt diese Sicht. Forschung zum tatsächlichen Kaufverhalten zeigt jedoch, dass Konsument:innen sich nicht auf eine Preiskategorie beschränken. Die meisten Konsument:innen kaufen über eine Bandbreite von Preisen hinweg. Mit der Zeit kaufen sie dieselbe Marke zu unterschiedlichen Preisen und kaufen außerdem Marken, die auf unterschiedlichen Preisniveaus liegen. Das kann an Verfügbarkeit, Aktionen, etwas, das ihnen ins Auge fällt, unterschiedlichen Bedürfnissen, Stimmungsschwankungen, dem Wunsch nach Abwechslung, dem Besuch der Großmutter und so weiter liegen. Diese vielen zufälligen Einflüsse führen zu gesetzesähnlichen Mustern im Cross-Buying auf unterschiedlichen Preisniveaus.
+
+Tabelle 10.1 zeigt zum Beispiel, dass im Instantkaffeemarkt im Vereinigten Königreich etwa die Hälfte, nämlich 51 %, jener, die im günstigsten Preisbereich kaufen, der als „--“ bezeichnet wird, auch im teuersten Preisbereich „++“ gekauft haben. Ebenso kauften 57 % derjenigen, die im unterdurchschnittlichen Preisbereich „-“ kauften, auch im teuersten Preisbereich, und so weiter. Insgesamt werden diese Muster von der Zahl der Menschen bestimmt, die in jeder Preisstufe kaufen – ähnlich wie beim Double-Jeopardy-Gesetz für Markenkäufe, das in Kapitel 2 beschrieben wurde. Das heißt: Menschen, die in irgendeiner Preisstufe kaufen, kaufen auch in anderen Preisstufen, entsprechend der Größe dieser anderen Preisstufen.
+
+## Tabelle 10.1: Kaufen in unterschiedlichen Preisstufen: Instantkaffee in einem Jahr
+
+| Käufer:innen von | Anteil (%) | Unterdurchschnittlich „-“ | Günstig „--“ | Teuer „++“ | Überdurchschnittlich „+“ |
+|---|---:|---:|---:|---:|---:|
+| Unterdurchschnittlich „-“ | 35 | – | 64 | 57 | 36 |
+| Günstig „--“ | 31 | 69 | – | 51 | 30 |
+| Teuer „++“ | 27 | 66 | 55 | – | 39 |
+| Überdurchschnittlich „+“ | 7 | 78 | 61 | 73 | – |
+| **Durchschnitt** | **25** | **71** | **60** | **60** | **35** |
+
+Zeilen und Spalten sind nach Popularität der Preisstufe geordnet. Käufer:innen jeder Preisstufe kaufen auch in anderen Preisstufen, ungefähr entsprechend dem Marktanteil dieser anderen Preisstufen.  
+Quelle: Daten mit freundlicher Genehmigung von Kantar Worldpanel.
+
+Das bedeutet: Wenn du eine „Low Price“-Marke managst, sind die Menschen, die sie kaufen, nicht ausschließlich darauf festgelegt, nur günstigere Marken zu kaufen. Viele deiner Verkäufe stammen tatsächlich von Menschen, die normalerweise Marken im mittleren oder Premiumbereich kaufen und manchmal eine günstige Marke kaufen. Dasselbe gilt für Premiummarken: Viele Verkäufe stammen tatsächlich von „Low Price“-Käufer:innen, die gelegentlich eine höherpreisige Marke kaufen. In jedem bestimmten Markt gibt es also Konsument:innen, die gewohnheitsmäßig eine Reihe von Marken kaufen und eine Reihe von Preisen zahlen. Deshalb ist es schwierig, mit Preisaktionen erfolgreich ein exklusives Segment von „Low Price Buyers“ anzusprechen, weil ein solches Segment normalerweise nicht existiert.
+
+## Warum führen Manager Preisaktionen durch?
+
+Laut Marketingtexten sollten Brand Manager Marken aufbauen und managen, indem sie diese Schritte befolgen:
+
+1. Kundenbedürfnisse und Wettbewerbssituation bewerten.
+2. Ein Angebot und eine Markenpositionierung konstruieren, die bei Käufer:innen Resonanz erzeugen.
+3. Einen Preis festlegen, der den Wert der Marke für Käufer:innen widerspiegelt.
+
+In der Praxis werden Marken routinemäßig unter ihrem normalen Preis rabattiert, um kurzfristig Verkäufe zu steigern. Manchmal wird mehr als die Hälfte der Verkäufe einer Marke zum rabattierten Preis getätigt. Das wirft die Frage auf, welches der beiden Preisniveaus der normale Preis der Marke ist.
+
+Was ist der Zweck dieser kurzfristigen Verkaufsspitzen? In vielen Fällen liefern sie keinen zusätzlichen Gewinn, weil die Marge auf Verkäufe verschenkt wird, die ohnehin zum vollen Preis gemacht worden wären. Preisaktionen sind bei Manager:innen beliebt, weil die Ergebnisse leicht zu sehen sind. Mehr Ware wird verkauft. Wenn eine Marke über Einzelhandelsgeschäfte verkauft wird, zeigen Sales-Tracking-Daten sofort eine beeindruckende Spitze. Diese Unmittelbarkeit ist attraktiv. Sie kann für ein Unternehmen wichtig sein, das Lagerbestand in Geld umwandeln muss. Es gibt weitere verwandte Gründe – etwa Manager:innen, die unter Druck stehen, Stückabsatzziele zu erreichen. Preisaktionen liefern diese Ergebnisse, führen aber auch zu Absatzzielen im nächsten Jahr, die noch mehr Preisnachlässe erfordern. Preisaktionen können für Organisationen zu einer Lebensweise werden, weil ihr Zurückfahren dazu führen würde, Verkaufsziele zu verfehlen. Deshalb sind solche Aktionen für Marketer hochgradig süchtig machend.
+
+Ein weiterer Grund für die Beliebtheit dieser Rabatte ist, dass Vertriebskanäle, etwa Einzelhändler, sie verlangen. Ein Händler kann dann Rabatte an Konsument:innen weitergeben und ein Image von gutem Wert aufbauen. Rabatte auf Einzelhandelsebene erlauben es einem Händler außerdem, Wettbewerbsdruck auf Rivalen aufrechtzuerhalten. Preisaktionen auf Herstellerseite können daher eine der Kosten sein, um gute Beziehungen zu Einzelhandelsdistributoren zu pflegen.
+
+Leider stärken In-Store-Promotions den Distributor, weil der Marktanteil der Marke von den Entscheidungen des Distributors abhängig wird. Preisaktionen können einer Marke auch „Zeit kaufen“ – kurzfristig Verkäufe steigern oder sie vor der Auslistung retten. Während die Uhr tickt, muss jedoch etwas getan werden, und es gibt Evidenz, dass eine stärkere Betonung von Preisaktionen mit einer geringeren Betonung von Innovation einhergeht (Pauwels et al. 2004). Schließlich könnte es sein, dass Preisaktionen deshalb so beliebt sind, weil es schwer ist, kreativere Ideen für Markenstrategie zu entwickeln.
+
+## Preisaktionen gewinnen keine neuen Kund:innen
+
+Manche Marketer glauben, dass Preissenkungen neue Kund:innen dazu bringen, eine Marke zu kaufen – Kund:innen, die später vielleicht zurückkehren und weitere Käufe zum vollen Preis tätigen. Es gibt jedoch wenig Evidenz dafür, dass dies geschieht. Ehrenberg, Hammond und Goodhardt (1994) fanden, dass fast alle, die eine Marke während einer Preisaktion kauften, die Marke zuvor bereits gekauft hatten. Einige akademische Forschende fanden sogar, dass manche Verkäufe in einer Preisaktion aus zukünftigen Verkäufen vorgezogen wurden, sodass die Volumenspitze während der Aktion bis zu einem gewissen Grad durch niedrigere Verkäufe nach der Aktion ausgeglichen wird. Glücklicherweise zeigt die Evidenz, dass der Haupteffekt Markensubstitution ist, nicht Vorziehen von Käufen.
+
+Wenn Preisaktionen keine neuen Käufer:innen anziehen können, können sie dann wenigstens seltene Käufer:innen zurückbringen? Vielleicht könnten Kauf und Nutzung die Kaufneigung seltener Käufer:innen verstärken. Diese Möglichkeit wurde als „Purchase Reinforcement Effect“ untersucht. Gefunden wurde, dass eine Preisaktion einen großen Anteil seltener Käufer:innen anzieht, also Käufer:innen mit geringer Neigung, eine Marke zu kaufen. Sie kaufen während der Aktion und nehmen danach ihre sehr niedrige Kaufneigung wieder auf. Anders gesagt: Nach dem Aktionskauf ist es, als wäre nichts passiert.
+
+Warum ist das so? Denken wir über Käufe von Konsument:innen über einen langen Zeitraum nach. Sie haben diese Kategorie vielleicht Dutzende oder Hunderte Male zuvor gekauft. Diese Marke im Angebot zu kaufen, ist für Konsument:innen nichts Besonderes. Sie haben diese Marke schon früher gekauft, genau wie sie Wettbewerbermarken früher gekauft haben, entweder im Angebot oder zum Normalpreis. Betrachten wir nun, was passieren könnte, bevor diese seltenen Käufer:innen erneut aus der Kategorie kaufen. Ehrenbergs Arbeiten über Jahrzehnte zeigen, dass die Inzidenz von Kategoriekäufen einer negativen Binomialverteilung folgt: viele seltene Käufer:innen und wenige häufige Käufer:innen (Ehrenberg 1959; Goodhardt, Ehrenberg & Chatfield 1984). Für die Mehrheit der Käufer:innen kann also viel Zeit vergehen, bevor sie wieder aus dieser bestimmten Kategorie kaufen. Während die verstrichene Zeit zwischen Käufen bei manchen Käufer:innen in manchen Kategorien nur eine oder zwei Wochen beträgt, etwa bei regelmäßigen Milch- oder Brotkäufen, kann sie bei Instantkaffee oder Zahnpasta mehrere Monate und bei seltener gekauften Gütern sechs Monate bis ein Jahr betragen. Wenn der Zeitpunkt für den Wiederkauf aus der betreffenden Kategorie kommt, haben Kund:innen möglicherweise Dutzende Marken in einer Reihe anderer Kategorien gekauft. Manche dieser Käufe waren im Angebot, manche nicht. Das bedeutet, dass der Kauf einer bestimmten Marke im Angebot in einer bestimmten Kategorie leicht vergessen wird, bevor das nächste Mal gekauft wird. Marken zu kaufen, die vorübergehend rabattiert sind, ist für Konsument:innen ein routinemäßiges, sehr häufiges Verhalten. Es gibt wenig Spielraum für eine dauerhafte oder halb dauerhafte Verhaltensänderung.
+
+Zusammengefasst bewirken Preisaktionen bei etablierten Marken, dass sie kurzfristige Kaufneigungen vor allem seltener Käufer:innen anstoßen, die die Gelegenheit nutzen, die Marke günstig zu kaufen, und danach zu ihrem normalen Kaufverhalten zurückkehren – also die Marke manchmal als Teil eines breiteren Repertoires zu kaufen. Wie Pauwels, Hanssens und Siddarth (2002, S. 437) formulieren: „Preisaktionen erzeugen nur temporäre Vorteile für etablierte Marken.“
+
+## Negative Nachwirkungen
+
+Viele Marketer machen sich zu Recht Sorgen über mögliche negative Nachwirkungen von Preisaktionen. Solche Nachwirkungen umfassen Widerstand von Konsument:innen, den Normalpreis zu zahlen, nachdem sie zu einem reduzierten Preis gekauft haben. Das ist eine Ausprägung des „Reference Price Effect“. Eine Reihe von Studien hat Referenzpreiseffekte in Lebensmittelmärkten gefunden (z. B. Hardie, Johnson & Fader 1993; Lattin & Bucklin 1989). Ein anderer Forschungsstrang zum Preiswissen hat jedoch gezeigt, dass viele Konsument:innen Mühe haben, sich an die Preise zu erinnern, die sie für Waren bezahlt haben (Vanhuele & Dreze 2002). Wie kann es einen Referenzpreiseffekt geben, wenn Konsument:innen ein niedriges Maß an Preiserinnerung haben und der Kauf von Marken im Angebot Routine ist? Wir lösen dieses Paradox, indem wir die Forschung zu Referenzpreisen und die Studien zur Preiserinnerung betrachten und anschließend die Ergebnisse beider Forschungsstränge miteinander versöhnen.
+
+## Referenzpreis
+
+Die akademische Preisforschung betont die Vorstellung eines Konsumenten-Referenzpreises – insbesondere des internen Referenzpreises des Konsumenten, also einer Erinnerung oder Erwartung dessen, was Preise sein sollten. Das Konzept eines externen Referenzpreises bezieht sich dagegen auf Informationen über Preise von Alternativen. Diese Preiserwartung soll durch frühere Preisexposition entstehen, entweder durch Kauf oder durch Beobachtung von Kommunikation wie Anzeigen. Die Idee eines Referenzpreises lautet: „Vergangene Preise sind wichtig.“ Wenn Konsument:innen auf einen Preis treffen, der über ihrem Referenzpreis liegt, dämpft dies ihre Kaufneigung.
+
+## Preiswissen
+
+Wir müssen die Vorstellung eines Referenzpreiseffekts mit dem weniger perfekten Preiswissen von Konsument:innen und der oben beschriebenen Routine des Einkaufens in Einklang bringen. Viele Studien zur Fähigkeit von Konsument:innen, Preise zu erinnern, zeigen eine schwache Erinnerung. In den USA wurde eine groß angelegte Studie (Dickson & Sawyer 1990) durchgeführt, bei der Käufer:innen kurz nach der Auswahl eines Produkts abgefangen wurden. Von diesen Käufer:innen kannte nur etwa die Hälfte den Preis des ausgewählten Artikels innerhalb einer Abweichung von 5 %. In Frankreich lag der Wert bei ungefähr einem Drittel der Käufer:innen (Vanhuele & Dreze 2002). Es scheint, dass entweder die Gedächtnisspur für den Preis des Artikels sehr flüchtig war oder dem Preis des Artikels von Anfang an wenig Aufmerksamkeit geschenkt wurde. In der Dickson-und-Sawyer-Studie behaupteten viele Käufer:innen, sie hätten den Preis des Artikels oder die Preise von Alternativen nicht überprüft.
+
+Die anfänglichen Befunde zum Preiswissen von Konsument:innen, etwa die Studie von Dickson und Sawyer (1990), basierten auf Preiserinnerung. Neuerdings haben Forschende argumentiert, dass zwei andere Maße geeigneter seien: Wiedererkennung und Deal Spotting. Wiedererkennungsstudien zeigen Käufer:innen drei Preise für einen Artikel, etwa den Normalpreis, 10 % über dem Normalpreis und 10 % unter dem Normalpreis. Vanhuele und Dreze (2002) wendeten diesen Ansatz bei Konsument:innen an und fanden, dass nur 13 % der Käufer:innen den korrekten Preis identifizierten. Das deutet darauf hin, dass auch die Preiserkennung ziemlich schwach ist. Beim Deal Spotting scheinen Käufer:innen ungefähr 50 % der Zeit in der Lage zu sein, ein „gutes Angebot“ für eine bestimmte Marke zu erkennen, wenn ihnen ein rabattierter Preis dafür gezeigt wird.
+
+Die Schlussfolgerung lautet: Während das Preiswissen von Konsument:innen verschwommen ist, hat ein beachtlicher Anteil der Konsument:innen eine ungefähre Vorstellung über den Preis innerhalb einer Zone rund um den tatsächlichen Preis. Außerdem scheinen Konsument:innen eher Relationen zwischen Marken zu kennen, also dass X gewöhnlich teurer ist als Y, statt absolute Preisniveaus. Und der Vergleich zwischen verfügbaren Marken ist wichtiger.
+
+Wird eine temporäre Preisaktion also negative Nachwirkungen für eine Marke haben? Die Antwort lautet: nein – aber wiederholtes Durchführen kann negative Nachwirkungen haben. Wenn Konsument:innen häufig niedrige Preise und Deal-Signale für eine Marke sehen, wird ihr Referenzpreis für diese Marke gesenkt. Außerdem gewöhnen sich Kund:innen daran, preisbezogene Informationen für die Marke zu sehen, was die Salienz von Preis und/oder Angebotsstickern erhöht und möglicherweise die Salienz anderer wichtiger Markenattribute senkt. US-Studien (Mela, Gupta & Lehmann 1997; Mela, Jedidi & Bowman 1998) fanden, dass häufigere Aktionen zu erhöhter Preissensitivität bei Konsument:innen führen sowie zu leicht längeren Interpurchase-Zeiten und leicht höheren Kaufmengen. Konsument:innen lernen also nicht nur, im Angebot zu kaufen, sondern auch, während der Preisaktion etwas mehr zu kaufen, was zu selteneren Käufen führt.
+
+Bei langfristigen negativen Effekten ist auch Wettbewerbsreaktion zu berücksichtigen. Manager:innen neigen dazu, übermäßig auf Preissenkungen der anderen zu reagieren (Brodie, Bonfrer & Cutler 1996). Allgemeiner wurde gezeigt, dass Wettbewerberreaktionen auf Preis weniger rational sind, wobei einige Unternehmen mehr Wert darauf legen, die Konkurrenz mit niedrigen Preisen zu „schlagen“, als Gewinn zu verfolgen. Unternehmen, die dies tun, drücken tendenziell ihre Gewinne (Armstrong & Collopy 1996; Armstrong & Green 2007). Ein interessantes Beispiel für das zerstörerische Potenzial einer „Beat the Competition“-Mentalität ist der Preiskrieg zwischen Greyhound und Peter Pan Trailways (Heil & Helsen 2001, S. 86). Der Preis für ein Busticket fiel von 25 Dollar auf 9,95 Dollar, auf 7 Dollar, auf 6,95 Dollar, und dann bot Greyhound einen 4-Dollar-Tarif an, der niedriger war als der Preis, den das Unternehmen 40 Jahre zuvor verlangt hatte. Dieser schnelle, ruinöse Preisverfall fand innerhalb von nur drei Wochen statt. In Extremfällen können Preiskriege mehrere Anbieter in die Insolvenz treiben. Eine Entscheidung, Rabatte einzusetzen oder zu eskalieren, muss daher berücksichtigen, dass Wettbewerber wahrscheinlich entsprechend reagieren werden, was zu niedrigeren Gewinnen oder sogar ernsthaften Schwierigkeiten für alle Anbieter führt.
+
+## Wie viel zusätzliches Volumen erzeugt eine Preissenkung?
+
+Preisaktionen steigern kurzfristig das Verkaufsvolumen – aber um wie viel? Der Begriff, der dafür verwendet wird, lautet Preiselastizität: die prozentuale Veränderung des Volumens bei einer Preisänderung von 1 %. Wenn zum Beispiel der Preis um 10 % gesenkt wird und das Verkaufsvolumen um 20 % steigt, beträgt die Elastizität -2. Die 20 wird durch 10 geteilt; das Minus zeigt an, dass Preis und Volumen sich in entgegengesetzte Richtungen bewegen.
+
+Studien haben ein vernünftiges Maß an Konsistenz in der durchschnittlichen Elastizität temporärer Aktionen gefunden. Danaher und Brodie (2000, S. 923) fanden eine durchschnittliche Preiselastizität von -2,3 über 26 Kategorien hinweg, wobei fast alle untersuchten Preisänderungen temporäre Aktionen waren. Scriven und Ehrenberg (2004) fanden eine durchschnittliche Elastizität von -2,6 in einer umfassenden Reihe von Experimenten, die sowohl Preiserhöhungen als auch Preissenkungen einschloss. Steenkamp und Kolleg:innen (2005) untersuchten 442 Produktkategorien und berichteten eine mittlere Elastizität von -4,0. Zusammenfassungen von In-Market-Studien fanden eine durchschnittliche Preiselastizität von -2,5 (Bijmolt, van Heerde & Pieters 2005; Tellis 1988).
+
+Diese Ergebnisse legen nahe, dass wir im Durchschnitt einen Anstieg des Verkaufsvolumens von ungefähr 25 % bei einer Preissenkung von 10 % erwarten können. Die meisten der oben zitierten Autor:innen weisen darauf hin, dass individuelle Elastizitäten stark variieren können, von 0 bis -20 oder größer. Die Mehrheit, etwa 70 %, fällt jedoch in den Bereich knapp unter -1 bis -4. Scriven und Ehrenberg erklären diese Variation, indem sie zeigen, dass Elastizität keine feste Eigenschaft einer Marke ist, sondern systematisch mit dem Kontext variiert, in dem eine Wahlentscheidung getroffen wird. Sie fanden fünf Faktoren, die konsistent zu größeren Preiselastizitäten führen. Diese werden nun erläutert.
+
+## Faktoren, die zu größeren Preiselastizitäten führen
+
+### 1. Wenn der Preis der Marke einen lokalen „Referenzpreis“ überschreitet
+
+Menschen wechseln eher von Marke A zu Marke B, wenn B günstiger wird als A, während B zuvor teurer war. Relative Preispositionen zu verändern ist viel wirksamer, als nur die Preislücke zu verkleinern. Ebenso hat das Vergrößern einer bereits bestehenden Preislücke weniger Effekt als das Verändern relativer Positionen. Je größer außerdem Wettbewerbermarke B ist, desto größer ist der Effekt. Daher kann es eine bessere Taktik sein, den Preis einer Marke leicht unter den Preis der größten Marken in der Kategorie zu setzen, als die Preise der Marktführer entweder stark zu unterbieten oder den Preis nahe am Preis des Marktführers zu setzen, ohne ihn zu unterbieten.
+
+### 2. Wenn die Preisänderung ausdrücklich signalisiert wird
+
+Das Signalisieren der Preisänderung hat einen großen Effekt. Der Signaleffekt hängt mit der Vorstellung zusammen, dass Konsument:innen eine unvollkommene Wahrnehmung von Preisen und ihren Relationen haben. Wenn wir also auf eine Preissenkung aufmerksam machen, etwa „war 54 Dollar, jetzt 30 Dollar“, werden mehr Menschen den Preis wahrnehmen und entsprechend handeln. Außerdem mögen Konsument:innen natürlich ein Schnäppchen. Viele Studien zum Effekt von In-Store-Preissignalen wie Beschilderung und Displays zeigen massive kurzfristige Verkaufsgewinne. Wenn eine Preissenkung von In-Store-Werbung begleitet wird, können Verkäufe um bis zu 400 % steigen (Woodside & Waddle 1975). Im Vereinigten Königreich berichteten Hamilton, East und Kalafatis (1997), dass Preissenkungen gekoppelt mit zusätzlicher Promotionsunterstützung Verkäufe um etwa 200–500 % erhöhen können. Totten und Block (1994, S. 70) berichteten, dass eine tiefe Preissenkung von 45 %, unterstützt durch Feature- oder Display-Werbung, Verkäufe um etwa 280 % und möglicherweise bis zu 400 % erhöhen kann.
+
+### 3. Wenn der Marktanteil der Marke niedrig ist
+
+Große Marken haben kleinere Preiselastizitäten; kleine Marken haben größere Elastizitäten. Das ist ein arithmetischer Effekt, der daraus resultiert, dass Elastizität mit Prozenten berechnet wird. Es ist leicht vorstellbar, dass eine Marke von 2 % auf 6 % Marktanteil steigt, etwa mit einer 50-%-Preissenkung; das würde eine Elastizität von -4 erfordern. Dieselbe Elastizität und Preissenkung bei einer Marke mit 30 % Marktanteil könnte den Anteil der Marke auf 90 % vergrößern, was fast unmöglich zu erreichen ist. Dieser Unterschied in der Elastizität bedeutet, dass kleine Marken größere Uplifts durch Aktionen genießen können, aber stärker leiden als große Marken, wenn sie Preise erhöhen. Umgekehrt fällt es größeren Marken schwerer, wirklich große proportionale Verkaufsanstiege durch Aktionen zu erzielen, aber sie leiden etwas weniger als kleine Marken, wenn sie Preise erhöhen.
+
+### 4. Wenn der Preis vom normalen Niveau erhöht wird
+
+Es wird oft angenommen, dass Elastizität bei Preiserhöhungen und Preissenkungen gleich ist, aber es gibt keinen Grund, warum das so sein sollte. Empirische Ergebnisse aus einer Reihe von Experimenten (Scriven & Ehrenberg 2004) zeigen, dass Preiserhöhungen einen größeren Effekt auf das Volumen haben als Preissenkungen – wenn man den reinen Effekt einer Preisänderung betrachtet, getrennt von zusätzlichen Effekten durch Signalisierung oder In-Store-Unterstützung.
+
+Größere Preiselastizitäten bei Preiserhöhungen passen zu einem bekannten Befund der Konsumentenpsychologie, der „Loss Aversion“ genannt wird. Experimentelle Studien unterstützen Verlustaversion. Viele Konsument:innen sind zum Beispiel zurückhaltend, faire Wetten anzunehmen, weil der potenzielle Verlust von beispielsweise 20 Dollar die Attraktivität eines möglichen Gewinns von 20 Dollar überwiegt (Kahneman & Tversky 1979). Wenn Konsument:innen einen ungefähren Referenzpreis für eine Marke haben, wird ein Anstieg über dieses Referenzniveau als „Verlust“ wahrgenommen, mit entsprechendem Rückgang der Kaufwahrscheinlichkeit.
+
+Dieser unterschiedliche Effekt von Preiserhöhungen scheint bei Handelsmarken noch ausgeprägter zu sein: Ihre Preiselastizität nach unten ist tendenziell eher gering, weil sie ohnehin oft schon günstiger sind, aber wenn ihr Preis erhöht wird, ist ihr Verkaufsverlust deutlich.
+
+### 5. Wenn der normale Preis der Marke nahe am Durchschnitt der anderen Marken liegt
+
+Wenn der Preis einer Marke nahe an den Durchschnittspreisen der Wettbewerber liegt, wird ihre Elastizität größer sein. Dafür gibt es zwei Gründe. Erstens: Wenn die Preise aller Marken stark auseinanderliegen, überbrückt eine Preisänderung einer Marke die Preislücke zwischen ihr und den Wettbewerbern nur zu einem kleineren Teil.
+
+Zweitens: Wenn der Preis der Marke nahe am Durchschnitt der Wettbewerber liegt, führt eine Preisänderung – nach oben oder unten – dazu, dass die Marke am Preis einer oder mehrerer Wettbewerber vorbeizieht, also von günstiger zu teurer oder umgekehrt. Preisexperimente zeigten durchschnittliche Preiselastizitäten im zweistelligen Bereich, wenn alle Marken beim selben Preis starten – weil eine Änderung dazu führt, dass eine Marke unter alle anderen gesetzt wird, was eine enorme Verschiebung in der Konsumentenwahl auslöst. Ein gutes Beispiel für dieses Phänomen ist Benzin in städtischen Lagen, wo es leicht ist, von einer Tankstelle zur anderen zu wechseln.
+
+Im Gegensatz dazu sind Elastizitäten kleiner, wenn der Preis einer Marke weiter vom Zentrum bzw. Durchschnitt der Preise in ihrer Kategorie entfernt ist. Dieser dämpfende Effekt auf Preiselastizität ist besonders ausgeprägt, wenn die Preise der meisten anderen Wettbewerbermarken nah beieinander liegen.
+
+Es gibt drei weitere Kategorieeigenschaften, die zu größeren Preiselastizitäten führen:
+
+1. Kategorien mit weniger Marken,
+2. Güter, die Konsument:innen sehr regelmäßig kaufen,
+3. Kategorien, die bevorratet werden können (Narasimhan, Neslin & Sen 1996).
+
+## Können Preissenkungen profitabel sein?
+
+Ein wichtiger Punkt ist, dass selbst sehr große Volumensteigerungen möglicherweise keinen zusätzlichen Gewinnbeitrag leisten. Das liegt daran, dass bei einer Preissenkung die Deckungsmarge pro Artikel noch stärker sinkt. Wenn die normale Deckungsmarge eines Produkts zum Beispiel 50 % beträgt, schneidet eine Preissenkung von 10 % 20 % von der Deckungsmarge ab. Im zuvor diskutierten Beispiel von Totten und Block (1994) würde eine Preissenkung von 45 % praktisch die gesamte Deckungsmarge einer normalen Konsumgütermarke eliminieren. Die Marke würde also nahe an den Herstellungskosten verkauft. Selbst wenn die Marke 400 % mehr Volumen verkauft, würde sie keinen zusätzlichen Gewinn machen, weil auf jedem verkauften Artikel fast keine Deckungsmarge mehr liegt.
+
+Die kurzfristige Profitabilität einer Preisaktion hängt von drei Faktoren ab:
+
+- der Deckungsmarge der Marke zum Normalpreis,
+- der Tiefe der Preissenkung,
+- der Preiselastizität der Marke.
+
+Mit diesen drei Faktoren können wir leicht Break-even-Szenarien berechnen, die zeigen, wie viel zusätzliches Volumen verkauft werden muss, um bei einer Preissenkung die Gewinnschwelle zu erreichen. Wenn die Deckungsmarge von Anfang an niedrig ist, ist ein massiver Verkaufsanstieg nötig, um die Gewinnschwelle zu erreichen. Wenn die Deckungsmarge hoch ist, kann eine Preissenkung selbst bei einem moderaten Verkaufsanstieg mehr Gewinn erzielen. Das liegt daran, dass jede zusätzliche Einheit noch genug Beitrag liefert, um die Preissenkung zu bezahlen. Drei Beispiel-Szenarien sind in Tabelle 10.2 gezeigt. Das erste Beispiel zeigt: Eine Marke, die zum Normalpreis verkauft und eine Deckungsmarge von 30 % erzielt, muss bei einer Preissenkung von 10 % 50 % mehr verkaufen, nur um denselben Betrag zu verdienen. Wenn die Aktion irgendeinen Verkaufsanstieg unter 50 % erzeugt, verliert die Marke Geld.
+
+## Tabelle 10.2: Break-even-Szenarien
+
+| Preissenkung (%) | Erforderlicher Verkaufsanstieg bei 30 % Deckungsmarge (%) | Erforderlicher Verkaufsanstieg bei 40 % Deckungsmarge (%) | Erforderlicher Verkaufsanstieg bei 50 % Deckungsmarge (%) |
+|---:|---:|---:|---:|
+| 5 | 20 | 10 | 11 |
+| 10 | 50 | 33 | 25 |
+| 20 | 200 | 100 | 66 |
+
+Solch große Verkaufsanstiege sind nötig, weil eine Preissenkung viel Volumen an Menschen verkauft, die die Marke ohnehin zum vollen Preis gekauft hätten. Das inkrementelle Volumen muss also hoch sein, um die verlorene Marge auf das zu bezahlen, was wir Baseline-Volumen nennen können. Dies wird in Abbildung 10.1 illustriert. Es gibt einige offensichtliche Verkaufsspitzen, die einwöchige Preisaktionen sind.
+
+Man beachte, dass die blauen Balken das Baseline- oder normale Verkaufsniveau darstellen, das ohnehin erzielt worden wäre, wenn die Preisaktion nicht stattgefunden hätte. Diese normalen Verkäufe wären zum vollen Preis verkauft worden, nicht zu einem rabattierten Preis.
+
+Da die Deckungsmarge bei größeren Rabatten mit exponentiell zunehmender Rate sinkt, lautet die Implikation für Manager:innen, die Preisaktionen einsetzen, dass sie diese so flach wie möglich machen sollten, etwa 10 % Rabatt statt 20 % Rabatt. Selbst wenn dies nicht zu ebenso hohen Volumenanstiegen führt, trägt das Volumen wenigstens mehr zum Gewinn bei.
+
+Es gibt einen weiteren Faktor, der die kurzfristige Profitabilität einer Preisaktion beeinträchtigen kann: Stückverkäufe können unmittelbar danach sinken. Das kann passieren, weil die Aktion manche Konsument:innen dazu gebracht hat, ihre Käufe vorzuziehen. Empirische Evidenz legt nahe, dass nach einer Aktion ein Verkaufstal auftreten kann (Mace & Neslin 2004; van Heerde, Leeflang & Wittink 2000). Wenn dies geschieht, hat die Aktion einige zukünftige Verkäufe zum vollen Preis und voller Marge ausgeliehen. Das zerstreut ihr Gewinnpotenzial. Manager:innen sollten diesen Effekt bei der Bewertung von Aktionen berücksichtigen.
+
+Schließlich gibt es die sehr wahrscheinliche Wettbewerberreaktion – nämlich, dass Wettbewerber Aktionen anpassen, um ihre Verkäufe zu halten. In diesem Fall steht jeder zusätzliche Verkauf, den du während des Rabatts machst, für einen zukünftigen Verkauf zum vollen Preis, der nun nicht stattfinden wird. Das ist ein sehr hoher und weitgehend vergessener Kostenpunkt von Preisaktionen.
+
+**Abbildung 10.1: Verkäufe einer führenden Cerealienmarke**  
+Quelle: Daten bereitgestellt von Synovate Aztec.
+
+Nun vergleichen wir Preisgestaltung mit Werbung als Mittel zur Stimulierung von Nachfrage und zur Aufrechterhaltung der Marktposition.
+
+## Vergleich von Preis versus Werbung
+
+Preissenkungen haben einen großen, direkten Effekt, aber sehr geringe Reichweite. Werbung hat große Reichweite, aber einen kleinen direkten Effekt auf Ebene des einzelnen Konsumenten. Werbung hat wohl außerdem einen länger anhaltenden Effekt, weil sie auf zugrunde liegende Kaufneigungen wirkt, während Preisaktionen die fortlaufende Kaufneigung nicht beeinflussen und keine günstigen Langzeiteffekte haben.
+
+Es stimmt sicherlich, dass In-Store-Preisaktionen stark zielgerichtet sind: Sie erreichen nur die Käufer:innen, die in dieser Woche für die Kategorie im Markt sind. Daher scheinen sie sehr effizient zu sein. Dieses Targeting durch Preisaktionen ist jedoch sehr teuer – 10 % oder 20 % Rabatt auf jeden verkauften Artikel. Preissenkungen geben viel an Menschen ab, die die Marke ohnehin gekauft hätten.
+
+Für Hersteller, die über Vertriebskanäle verkaufen, können Preisaktionen mit mehreren Ebenen von Händlerunterstützung stattfinden, und Händlerunterstützung hat Implikationen für Reichweite. Das niedrigste Unterstützungsniveau ist eine In-Store-Preissenkung mit nur dem allgegenwärtigen „Special“-Schild am Regal. Eine In-Store-Preissenkung hat das niedrigste Reichweitenniveau, weil nur Konsument:innen, die zufällig im Geschäft sind und sich zu diesem Zeitpunkt Marken in der Kategorie ansehen, sie bemerken. Die Zahl der Konsument:innen, die dies in einer bestimmten Woche tun würden, macht einen sehr kleinen Anteil des Marktes aus. In Lebensmittelmärkten kaufen zum Beispiel in einem typischen Aktionszeitraum von zwei Wochen ungefähr 60 % der Haushalte Brot, 20 % Suppe und 10 % eine Kategorie wie Shampoo – aber diese Zahlen sind die Gesamtpenetration über alle Händler. Eine Preisaktion bei einem einzelnen Händler erreicht nur einen Bruchteil dieser Käufer:innen. Bei einem Händler-Marktanteil von etwa 10 % erreicht eine solche Preisaktion bei diesem Händler nur 10 % x 60 % = 6 % der Brotkäufer:innen, 10 % x 20 % = 2 % der Suppenkäufer:innen und 10 % x 10 % = 1 % der Shampookäufer:innen. Diese Art von Preisaktion hat also sehr geringe Reichweite.
+
+Die nächste Ebene der In-Store-Unterstützung beinhaltet ein Display am Gangende. Fast jede:r im Geschäft könnte dieses Display bemerken, aber seine Reichweite hat eine Obergrenze: den Anteil der Bevölkerung, der in dieser Woche bei diesem Händler einkauft – und das ist oft ein kleiner Anteil.
+
+Die dritte Ebene der Distributionsunterstützung besteht darin, dass die Marke in Katalogen oder über Massenmedienwerbung des Händlers beworben wird. Dadurch werden Preisaktion und Marke einem viel breiteren Publikum zugänglich gemacht. Die Reichweite dieses Unterstützungsniveaus ist wohl so groß wie die Reichweite normaler Werbung. Eine Preisaktion so breit zu bewerben, riskiert jedoch, den Referenzpreis der Marke bei einer breiteren Gruppe von Menschen zu senken. Daher wäre es möglicherweise vorzuziehen, ein Off-Shelf-Display oder Händlerwerbung ohne Preissenkung zu organisieren. Das Problem ist: Preissenkung ist meist Voraussetzung, um ein Off-Shelf-Display zu erhalten oder in der Werbung des Händlers aufzutauchen.
+
+Zusammengefasst wurden in diesem Buch folgende Beobachtungen gemacht:
+
+- Reichweite ist wichtig für Markenwachstum.
+- In-Store-Promotions haben im Allgemeinen wenig Reichweite, aber Händlerwerbung hat viel breitere Reichweite.
+- Preisaktionen sind möglicherweise nicht profitabel, insbesondere wenn die Preissenkung tief ist.
+- Es besteht die Möglichkeit, dass Referenzpreise erodieren, insbesondere durch tiefe Preisnachlässe.
+- Hersteller fühlen sich jedoch oft unter Druck gesetzt, an Preisaktionen teilzunehmen.
+
+Auf Basis dieser Beobachtungen sollte ein Hersteller, wenn er zwischen einer Aktion mit Schwerpunkt auf tiefen Preisnachlässen und einer Aktion mit Fokus auf Werbung für die Marke wählen müsste, Letzteres wählen. Denn die Marke würde dann in Händlerwerbung erscheinen, die eher wie normale Werbung funktioniert und Reichweite für die Marke erzielt. Diese Kommunikation muss möglicherweise mit einem reduzierten Preis verknüpft sein, aber der Preis muss nicht so niedrig sein, wie er wäre, wenn der Schwerpunkt vollständig auf Preis und weniger auf Kommunikationsunterstützung läge.
+
+## Umgang mit Preisaktions-Sucht
+
+Eine Preisaktion liefert in den meisten Fällen einen Verkaufsanstieg. Wie groß dieser Verkaufsanstieg ist und ob die Aktion alle Gewinne vollständig vernichtet, hängt von Faktoren wie der Größe der Marke und ihrem Preis relativ zum Wettbewerb vor und nach der Preissenkung ab. Aktuelle Evidenz legt nahe, dass es keinen langfristigen Verkaufsanstieg als Ergebnis der Verkaufsspitze während der Preisaktion gibt: Käufer:innen kehren zu ihren Kaufmustern vor der Aktion zurück, und Verkäufe kehren auf das Niveau vor der Aktion zurück. Das bedeutet, dass der Effekt einer Preisaktion auf Verkäufe und Gewinn leicht bewertet werden kann. Analyst:innen müssen nur die Verkaufsspitze während des Aktionszeitraums, ein mögliches Verkaufstal unmittelbar danach und wahrscheinliche Vergeltungsaktionen von Wettbewerbern berücksichtigen.
+
+In vielen Fällen haben Manager:innen andere Motive für Preisaktionen als das bloße Jagen von Verkaufsspitzen. Ein häufig genannter Grund für Hersteller, Aktionen durchzuführen, ist, Händler zufriedenzustellen oder zu beschwichtigen. Langfristig mag dies der einzige rechtfertigbare Grund für Preisaktionen sein. Aber wenn die Pflege von Händlerbeziehungen das Ziel einer Preisaktion ist, sollte genau diese Kennzahl bewertet werden – doch eine solche Bewertung wird selten in formaler Weise durchgeführt.
+
+Abschließend: Viele Preisnachlässe sind erheblich kostspielig. Sie erodieren Markenmargen zum Nutzen von Händler und Konsument:in. Der Rat an Markeninhaber lautet, lange und gründlich darüber nachzudenken, was Preisnachlässe langfristig erreichen, und zu versuchen, den langfristigen Trend umzukehren, dass Marketinggeld von markenaufbauenden Aktivitäten in Rabatte umgeleitet wird. Frage, wie viele Preisaktionen wirklich nötig sind, um eine Auslistung bei einem Händler zu vermeiden – und vermeide, mehr als das zu tun.

docs/10_Quellen-Original/Sharp_How-Brands-Grow/how_brands_grow_chapter_11_de.md

@@ -0,0 +1,101 @@
+# Kapitel 11: Warum Loyalty-Programme nicht funktionieren
+
+**Byron Sharp**
+
+Loyalty-Programme sind strukturierte Marketingmaßnahmen, die loyales Kaufverhalten belohnen und dadurch fördern sollen. Die typischsten Programme geben Konsument:innen jedes Mal Punkte, wenn sie Käufe tätigen. Nach und nach, nach vielen Käufen, summieren sich diese Punkte und erreichen ein Niveau, auf dem sie gegen Belohnungen eingelöst werden können. Dieses Punktesystem ist ein Anreiz für Konsument:innen, eine bestimmte Marke häufiger zu kaufen, also ihre Loyalität zu erhöhen, um schneller mehr Belohnungen zu erhalten. Solche Loyalty-Programme könnten außerdem den Wechsel von der Marke weg erschweren, denn sobald Kund:innen Punkte gesammelt haben und wenn sie das Loyalty-Programm mögen und wertschätzen, sollten sie weniger wahrscheinlich zu einer anderen Marke wechseln. So lautet zumindest die Logik.
+
+In den letzten zehn Jahren wurden enorme Summen in Loyalty-Programme investiert – von allen möglichen Unternehmen, von Fluglinien bis zu Cafés. Manche Marketer implementierten diese Programme, weil es modisch war, oder starteten Programme, weil sie nun die Technologie dazu hatten. Die meisten Marketer wurden jedoch von der Hoffnung motiviert, dass Loyalty-Programme Loyalität verbessern würden. Sie erwarteten großartige Geschäftsergebnisse mit starken Zuwächsen bei Umsatz und Gewinn.
+
+Wie jedoch in Kapitel 1 diskutiert, werden Marketingstrategien, die auf falschen Annahmen beruhen, niemals hohe Renditen liefern – egal, wie gut diese Strategien umgesetzt werden. Die zentralen Annahmen, die den großen Investitionen in Loyalty-Programme zugrunde lagen, sind fehlerhaft. Viele Menschen nahmen an, dass Loyalitätsniveaus leicht dramatisch verbessert werden könnten; dass Kundenabwanderung reduziert werden könnte – sogar auf null – und dass bestehende Kund:innen dazu gebracht werden könnten, alle ihre Käufe einer Marke zu widmen, also 100 % loyal zu werden. Man nahm an, dies würde zu erheblichem Wachstum bei Umsatz und Gewinn führen. Außerdem wurde fälschlicherweise angenommen, dass das Targeting der loyalsten Kund:innen einer Marke die größte Rendite erzeugen würde. Die Begeisterung für Loyalty-Programme hat inzwischen nachgelassen, und einige Unternehmen fahren Loyalty-Programme zurück. Es gibt keine Evidenz dafür, dass herausragende Geschäftsergebnisse durch Loyalty-Programme getrieben werden, und trotz tausender Programme tritt merkwürdigerweise niemand nach vorn, um seinen Erfolg vorzuzeigen.
+
+Loyalty-Programme sind dennoch weiterhin ein großes Geschäft. Eines der Probleme großer Konsumenten-Loyalty-Programme ist, dass es für Unternehmen schwierig ist, aus ihnen auszusteigen. Konsument:innen, die Punkte gesammelt haben, reagieren nicht freundlich darauf, diese zu verlieren. Wenn Konsument:innen gesagt wird, dass sie ihre Punkte verlieren, neigen sie dazu, den Punkten einen unrealistisch hohen Wert beizumessen – selbst wenn sie sie wahrscheinlich nie eingelöst hätten. Es gibt außerdem vertragliche und rechtliche Hindernisse beim Schließen eines Loyalty-Programms, und es gibt erhebliche versunkene Kosten, einschließlich Management-Ego, die in das Programm investiert wurden. Unternehmen erweisen sich als ziemlich loyal gegenüber ihren Loyalty-Programmen und führen sie tendenziell viel länger fort, als rationale Ökonomie empfehlen würde.
+
+## Verbessern Loyalty-Programme Loyalität?
+
+Beeinflussen Loyalty-Programme Loyalität? Es mag überraschen: Ja, das tun sie. Allerdings ist der Effekt sehr schwach. Das Ehrenberg-Bass Institute veröffentlichte die erste groß angelegte empirische Studie (siehe Sharp & Sharp 1997a), die eines der weltweit größten Loyalty-Programme hinsichtlich Einzelhandelsabdeckung in Australien analysierte. Die Studie beobachtete einen schwachen Effekt – einen Effekt, der möglicherweise ebenso viel mit dem Programmstart und dessen Marketingausgaben zu tun hatte wie mit dem Programm selbst.
+
+Die technische Schwierigkeit bei der Bewertung des Effekts von Loyalty-Programmen auf Loyalität besteht darin, eine Baseline zu haben, mit der Vergleiche gemacht werden können. Das Verhalten von Loyalty-Programm-Mitgliedern einfach mit dem von Nicht-Mitgliedern zu vergleichen, ist ungeeignet, weil die loyaleren Kund:innen einer Marke dem Programm beitreten werden – ein Selektionseffekt, der entsteht, weil diese Käufer:innen mehr zu gewinnen haben. Nach Veränderungen im Verhalten von Konsument:innen seit Einführung des Loyalty-Programms zu suchen, ist schwierig, weil man dafür Daten über lange Perioden kontinuierlichen Kaufens vor und nach der Einführung des Programms bräuchte. Eine lange Datenperiode ist nötig, um das Loyalitätsniveau einzelner Konsument:innen korrekt zu klassifizieren, weil ihr Kaufverhalten schwankt. Das Gesetz der Käufermoderation (siehe Kapitel 4) bedeutet, dass viele Mitglieder von Loyalty-Programmen fälschlich als weniger loyal klassifiziert werden, als sie wirklich sind. Mit der Zeit wird es so aussehen, als würden diese Käufer:innen loyaler werden, und dieser „Regression zum Mittelwert“-Effekt wird fälschlicherweise dem Loyalty-Programm zugeschrieben. Eine Analyse eines sehr kleinen Loyalty-Programms eines Convenience Stores litt unter diesem Problem (Liu 2007).
+
+Glücklicherweise bedeuten die in diesem Buch eingeführten wissenschaftlichen Gesetzmäßigkeiten, dass Benchmarks für Loyalitätskennzahlen verfügbar sind. Diese beseitigen das Problem von Selektionseffekten und werden genutzt, um zu sehen, ob Marken, die Loyalty-Programme betrieben, ungewöhnliche Loyalität für ihren Marktanteil haben.
+
+Tabelle 11.1 illustriert die Ergebnisse der Studie des Ehrenberg-Bass Institute, die das kategorieübergreifende Loyalty-Programm FlyBuys untersuchte. FlyBuys ist ein separates Programm in zwei Ländern: Australien und Neuseeland. Wie der Name nahelegt, belohnte das Loyalty-Programm Käufer:innen mit Punkten, die gegen Flüge eingelöst werden konnten.
+
+Loyalty-Programme sollten Marken nischenartig aussehen lassen. Das heißt: Ihr Marktanteil sollte aus ungewöhnlich hoher Loyalität relativ zu Marktanteil und Penetration bestehen. Das liegt daran, dass Loyalty-Programme einen eingeschränkten Teil der Kundenbasis erreichen und diese Konsument:innen ermutigen, häufiger zu kaufen. Ein Loyalty-Programm kann also den Marktanteil einer Marke stark oder auch nicht stark erhöhen, aber es sollte dafür sorgen, dass dieser Marktanteil aus einer ungewöhnlichen Kombination von Penetration und Loyalität besteht. Anders ausgedrückt: Es wird wahrscheinlich keine Penetration treiben, aber vielleicht Loyalität – was nicht die übliche Art ist, wie Marken wachsen. Tabelle 11.1 zeigt jede Marke im FlyBuys-Loyalty-Programm sowie die Penetrations- und Loyalitätskennzahlen, die nötig sind, um ihren Marktanteil zu bilden. Durch den Vergleich der vorhergesagten und beobachteten Marktanteilszusammensetzung können wir sehen, dass es offenbar einen Loyalitätseffekt gibt. Der Effekt ist jedoch so schwach, dass er inkonsistent ist; einige Marken zeigen das Muster nicht, vermutlich weil andere Marketing-Mix-Faktoren den schwachen Effekt überdecken.
+
+## Tabelle 11.1: Das FlyBuys-Loyalty-Programm
+
+| Kategorie / Marke | Penetration beobachtet (%) | Penetration vorhergesagt (%) | Durchschnittliche Kaufhäufigkeit beobachtet | Durchschnittliche Kaufhäufigkeit vorhergesagt | Share of Requirements beobachtet (%) | Share of Requirements vorhergesagt (%) | Sole Buyers beobachtet (%) | Sole Buyers vorhergesagt (%) |
+|---|---:|---:|---:|---:|---:|---:|---:|---:|
+| **Department Stores (Australien)** |  |  |  |  |  |  |  |  |
+| Kmart | 48 | 52 | 3,7 | 3,4 | 34 | 31 | 10 | 7 |
+| Target | 43 | 42 | 2,9 | 3,0 | 27 | 27 | 5 | 6 |
+| Myer | 35 | 34 | 2,8 | 2,8 | 23 | 25 | 5 | 5 |
+| **Supermärkte (Australien)** |  |  |  |  |  |  |  |  |
+| Coles | 61 | 64 | 9,8 | 9,4 | 31 | 29 | 5 | 3 |
+| Bilo | 58 | 60 | 9,1 | 8,9 | 29 | 27 | 3 | 3 |
+| **Tankstellen / Retail Petrol (Australien)** |  |  |  |  |  |  |  |  |
+| Shell | 46 | 51 | 6,3 | 5,8 | 42 | 35 | 11 | 10 |
+| **Bank-Kreditkarten (Neuseeland)** |  |  |  |  |  |  |  |  |
+| NAB | 20 | 25 | 9,6 | 7,2 | 87 | 70 | 79 | 63 |
+| BNZ | 27 | 28 | 8,1 | 7,9 | 88 | 84 | 79 | 80 |
+| **Telefonanrufe (Neuseeland)** |  |  |  |  |  |  |  |  |
+| Telecom | 86 | 85 | 24,8 | 24,7 | 94 | 93 | 88 | 87 |
+| **Tankstellen / Retail Petrol (Neuseeland)** |  |  |  |  |  |  |  |  |
+| Shell | 54 | 57 | 6,9 | 6,5 | 52 | 47 | 22 | 16 |
+| **Durchschnitt** | **48** | **50** | **8,4** | **8,0** | **51** | **47** | **31** | **28** |
+
+Quelle: Ehrenberg-Bass Institute (siehe Sharp & Sharp 1997).
+
+Die Professoren Lars Meyer-Waarden und Christophe Benavent (2006) replizierten die Ehrenberg-Bass-Forschung mit dem AGB Behavior Scan Panel in Frankreich. Sie untersuchten den Effekt von vier Supermarkt-Loyalty-Programmen und beobachteten ebenfalls schwache und inkonsistente Effekte. Leenheer und Kolleg:innen (2007) nutzten einen anderen Ansatz, ein einmaliges statistisches Modell, um Selektionseffekte zu kontrollieren, also dass die loyalsten Konsument:innen dem Loyalty-Programm einer Marke beitreten. Ihre Studie zu niederländischen Supermarkt-Loyalty-Programmen fand ebenfalls sehr kleine Loyalitätseffekte. Ein weiterer niederländischer Forscher (Verhoef 2003) fand kleine positive Effekte auf Retention und Share im Finanzdienstleistungsmarkt. Verhoef räumte jedoch ein, dass das Längsschnittdesign seiner Studie die Selektionseffekte nicht vollständig berücksichtigte. Es ist eine konsistente Geschichte: Loyalty-Programme erzeugen sehr geringe Loyalitätseffekte und tun praktisch nichts, um Wachstum zu treiben. Der daraus folgende Effekt auf Gewinne ist vermutlich negativ.
+
+## Warum funktionieren Loyalty-Programme nicht besser?
+
+Die Antwort liegt darin, dass Loyalty-Programme aus Sicht der Marketingstrategie etwas Ungewöhnliches haben: Sie sind stärker als andere Marketinginterventionen auf schwerere, loyalere Käufer:innen der Marke verzerrt. Dieser Selektionseffekt tritt aus zwei Gründen auf.
+
+Der erste Grund ist physische und mentale Verfügbarkeit: Es ist für loyalere Käufer:innen einfacher, das Loyalty-Programm zu bemerken und beizutreten. Das gilt besonders für Retail-Loyalty-Programme, bei denen die Anmeldung normalerweise nur im Geschäft möglich ist; regelmäßigere Käufer:innen haben statistisch eine viel höhere Chance, beizutreten, weil sie häufiger zufällig damit in Kontakt kommen.
+
+Der zweite Grund ist der ökonomische Anreiz zum Beitritt, der für bereits loyale Käufer:innen viel stärker ist. Sie können erkennen, dass sie dafür belohnt werden, das zu tun, was sie ohnehin tun – „etwas für nichts“ zu bekommen, ist ein attraktives Angebot.
+
+Im Kern sehen Konsument:innen, die eine Marke selten kaufen oder selten in einem bestimmten Geschäft einkaufen, das Loyalty-Programm nicht – und wenn sie es sehen, erkennen sie keinen Sinn darin, beizutreten. Das schränkt die Reichweite von Loyalty-Programmen erheblich ein und begrenzt damit ihre Fähigkeit, substantielles Wachstum zu erzeugen.
+
+Es stellt sich außerdem die Frage, welchen Effekt das Loyalty-Programm auf jene Konsument:innen hat, die es tatsächlich erreicht, also Konsument:innen, die dem Programm beitreten und daran denken, teilzunehmen. Logischerweise hängt dieser Effekt nicht nur von der Stärke des Loyalty-Programms ab, sondern auch davon, welche bestimmten Konsument:innen das Loyalty-Programm rekrutiert. Tabelle 11.2 zeigt, dass es vier Arten von Konsument:innen gibt, die ein Loyalty-Programm rekrutieren und potenziell beeinflussen kann – also in ihrer Loyalität gegenüber der Marke mit dem Loyalty-Programm beeinflussen kann.
+
+## Tabelle 11.2: Arten von Kund:innen, die dem Loyalty-Programm beitreten könnten
+
+|  | Niedrige Loyalität | Hohe Loyalität |
+|---|---|---|
+| **Leichte Kategorie-Käufer:innen** | Unwahrscheinlich, dass sie dem Programm beitreten; dies ist jedoch die größte Konsumentengruppe, daher treten trotzdem einige bei. Nicht besonders wünschenswert. | Wahrscheinlich, dass sie dem Programm beitreten, aber unerwünscht. |
+| **Schwere Kategorie-Käufer:innen** | Sehr unwahrscheinlich, dass sie dem Programm beitreten, aber sehr wünschenswert. | Wahrscheinlich, dass sie dem Programm beitreten, aber unerwünscht. |
+
+Die meisten Konsument:innen fallen in den oberen linken Quadranten, weil die meisten Käufer:innen leichtere-than-average Konsument:innen von Produkten in einer bestimmten Kategorie sind und die meisten Käufer:innen einer Marke auch andere Marken kaufen. Ein Loyalty-Programm wird zwangsläufig einige dieser leichten Konsument:innen rekrutieren, weil es so viele von ihnen gibt. Die meisten werden zu inaktiven Nutzer:innen des Programms, da sie im Allgemeinen nicht genug Punkte sammeln, um sich für Belohnungen zu qualifizieren, und deshalb das Programm nach und nach vergessen oder ablehnen, etwa indem sie die Loyalty-Karte verlieren. Hoffentlich werden einige wenige dieser Konsument:innen zu stärkeren Käufer:innen.
+
+Wenn ein Loyalty-Programm nur hoch loyale Käufer:innen rekrutiert, also die rechten Quadranten, hat es kaum Chance, irgendeine Veränderung zu erzeugen. Erstens müssen diese Menschen ihr Verhalten nicht ändern, um Belohnungen zu erhalten. Zweitens können sie sich ohnehin kaum ändern, da sie bereits sehr loyal sind. Wegen dieser Konsument:innen kann ein Loyalty-Programm negative Effekte haben: Es gibt Belohnungen ab, gewinnt aber keine Verhaltensänderung zurück.
+
+Konsument:innen im unteren linken Quadranten sind die wünschenswertesten Konsument:innen, die ein Loyalty-Programm rekrutieren kann. Wenn ein Loyalty-Programm Konsument:innen erreicht, die schwere Käufer:innen einer Kategorie und nicht 100 % loyal gegenüber einer Marke sind, dann ist es eher in der Lage, zusätzliche Loyalität und Verkäufe zu extrahieren. Diese schweren Käufer:innen haben mehr Loyalität zu geben. Ihre Motivation ist jedoch nicht unbedingt hoch, da sie ohnehin Belohnungen verdienen werden. Die Motivation, die sie haben, wird außerdem leicht durch Wettbewerber-Loyalty-Programme und Promotions aufgehoben. Diese schweren Käufer:innen sind sehr aufmerksam gegenüber Wettbewerberangeboten.
+
+Mit diesem Wissen über die Struktur des Marktes und die Natur von Loyalty-Programmen legt die Logik nahe, dass solche Programme wenig Chance haben, erhöhte Verkäufe und Gewinne zu erzeugen. Der Erfolg eines Loyalty-Programms hängt davon ab, viele Konsument:innen aus dem unteren linken Quadranten zu rekrutieren – was unwahrscheinlich ist. Idealerweise müsste ein Programm aus Kostensicht so wenige Konsument:innen wie möglich rekrutieren, die bereits loyal gegenüber der Marke sind. Das ist jedoch wahrscheinlich unmöglich. Was passiert in der realen Welt? Wie du vermutlich vermutet hast, sind Loyalty-Programme gut darin, bestehende Käufer:innen einer Marke zu rekrutieren – sowohl schwere als auch leichte Kategorie-Käufer:innen –, aber schlecht darin, schwere Kategorie-Käufer:innen zu rekrutieren, die aktuell keine Käufer:innen einer Marke sind.
+
+Tabelle 11.3 zeigt die Kategoriekaufrate von Mitgliedern und Nicht-Mitgliedern eines Loyalty-Programms. Die Tabelle zeigt klar, dass Loyalty-Programme es nicht schaffen, überproportional viele stärkere Käufer:innen anzuziehen.
+
+## Tabelle 11.3: Kaufraten von Mitgliedern und Nicht-Mitgliedern eines Loyalty-Programms
+
+| Kategorie | Durchschnittliche Kaufhäufigkeit von Konsument:innen, die dem Programm beigetreten sind | Durchschnittliche Kaufhäufigkeit von Konsument:innen, die dem Programm nicht beigetreten sind |
+|---|---:|---:|
+| Supermärkte | 27 | 28 |
+| Retail Fuel | 13 | 14 |
+| Department Stores | 10 | 9 |
+| Kreditkarten | 10 | 9 |
+| Telekommunikation | 26 | 26 |
+| Petrol | 12 | 13 |
+| Kreditkarten | 9 | 9 |
+| **Durchschnitt** | **15** | **15** |
+
+Quelle: Ehrenberg-Bass Institute.
+
+Trotz der obigen Diskussion ist diese Entdeckung ein wenig überraschend, weil schwerere Kategorie-Käufer:innen – sowohl regelmäßige Käufer:innen einer Marke als auch Nicht-Käufer:innen – von einem Loyalty-Programm viel mehr zu gewinnen haben. Es wäre plausibel zu erwarten, dass Mitglieder von Loyalty-Programmen stärkere Käufer:innen einer Kategorie sind.
+
+Was dies zeigt: Mentale und physische Verfügbarkeit sind der dominante Treiber der Rekrutierung für Loyalty-Programme – vor der Attraktivität der Belohnungen. Bestehende Käufer:innen einer Marke treten bei, also sowohl schwere als auch leichte Käufer:innen der Kategorie. Das deutet darauf hin, dass die beste Art, ein Loyalty-Programm zu bewerben und Mitglieder zu rekrutieren, darin bestünde, nicht die eigenen Geschäfte, die eigene Website oder die eigene Mailingliste einer Marke zu nutzen. Idealerweise würde eine Marke Mitglieder in den Geschäften ihrer Wettbewerber rekrutieren. Leider ist es extrem schwierig, die inhärenten Eigenschaften eines Loyalty-Programms zu überwinden – nämlich dass es zu bestehenden Käufer:innen der Marke verzerrt ist. Deshalb können Loyalty-Programme keine große Wirkung haben. Sie belohnen im Kern bestehende Käufer:innen für das, was sie ohnehin tun.
+
+Loyalty-Programme sind nicht gut darin, Loyalität zu beeinflussen. Sie eignen sich eher dazu, eine Datenbank von Konsument:innen aufzubauen, einen neuen Kanal zur Kommunikation mit Konsument:innen zu schaffen und deren In-Store-Käufe zu überwachen. Das ist ein sehr teures und schwieriges Unterfangen und hat für manche Marketer mehr Wert als für andere. Die meisten Loyalty-Programme müssen diese Daten sammeln oder nutzen, wenn sie ihre Investition wieder hereinholen wollen. Leider sind diese Daten verzerrt: Sie stammen von loyaleren Käufer:innen. Sie zeigen nicht, welche Einkäufe diese Menschen in Geschäften von Wettbewerbern tätigen. Betreiber von Loyalty-Programmen rühmen sich oft mit ihren großen Stichprobengrößen im Vergleich zu Marktforschungspanels. Aber wie wir alle im Marktforschungskurs gelernt haben: Eine verzerrte Stichprobe größer zu machen, behebt nichts.
+
+Dieses Kapitel hat gezeigt, dass Loyalty-Programme wenig Wirkung haben. Es hat außerdem gezeigt, dass Wissen über wissenschaftliche Gesetzmäßigkeiten zu Einsicht, Vorhersage und Verständnis führen kann. Wenn alle Brand Manager diese Gesetzmäßigkeiten gekannt hätten, wären Milliarden von Dollar nicht für schlecht performende Marketinginvestitionen wie Loyalty-Programme ausgegeben worden.