gitmedia/markemacht
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Markenwissen-Wissensbasis: Konsistenz-Korrekturen + Copyright-Hygiene
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (8.3) (push) Has been cancelled
Details
tests / ci (8.4) (push) Has been cancelled
Details
tests / ci (8.5) (push) Has been cancelled
Details

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

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

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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Kevin Adametz 2026-05-29 08:23:03 +00:00
commit 00796a35d5
214 changed files with 38162 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1187
_markemacht.de/assets/css/app.css Normal file
View file

File diff suppressed because it is too large Load diff

6
_markemacht.de/assets/favicon.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 315 B

131
_markemacht.de/assets/js/app.js Normal file
View file

@ -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();
}
})();

249
_markemacht.de/denken.html Normal file
View file

@ -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>

231
_markemacht.de/dev/based_web_design/das_manifest/code.html Normal file
View file

@ -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>

BIN
_markemacht.de/dev/based_web_design/das_manifest/screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 232 KiB

228
_markemacht.de/dev/based_web_design/das_manifest_warm/code.html Normal file
View file

@ -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>

BIN
_markemacht.de/dev/based_web_design/das_manifest_warm/screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 243 KiB

235
_markemacht.de/dev/based_web_design/denken_blog/code.html Normal file
View file

@ -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>

BIN
_markemacht.de/dev/based_web_design/denken_blog/screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 193 KiB

318
_markemacht.de/dev/based_web_design/denken_warm/code.html Normal file
View file

@ -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>

BIN
_markemacht.de/dev/based_web_design/denken_warm/screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 680 KiB

323
_markemacht.de/dev/based_web_design/die_methode/code.html Normal file
View file

@ -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>

BIN
_markemacht.de/dev/based_web_design/die_methode/screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 158 KiB

285
_markemacht.de/dev/based_web_design/die_methode_warm/code.html Normal file
View file

@ -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>

BIN
_markemacht.de/dev/based_web_design/die_methode_warm/screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 565 KiB

499
_markemacht.de/dev/based_web_design/markemacht.de_design_system/DESIGN.md Normal file
View file

@ -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

268
_markemacht.de/dev/based_web_design/startseite/code.html Normal file
View file

@ -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>

BIN
_markemacht.de/dev/based_web_design/startseite/screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 166 KiB

302
_markemacht.de/dev/based_web_design/startseite_warm/code.html Normal file
View file

@ -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>

BIN
_markemacht.de/dev/based_web_design/startseite_warm/screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 260 KiB

175
_markemacht.de/dev/based_web_design/warm_intellectualism/DESIGN.md Normal file
View file

@ -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.

223
_markemacht.de/dev/first design/artikel-marketingchef.html Normal file
View file

@ -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>

209
_markemacht.de/dev/first design/artikel-vergleichbarkeit.html Normal file
View file

@ -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>

212
_markemacht.de/dev/first design/blog.html Normal file
View file

@ -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>

573
_markemacht.de/dev/first design/content.md Normal file
View file

@ -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

431
_markemacht.de/dev/first design/design.de Normal file
View file

@ -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

406
_markemacht.de/dev/first design/design.md Normal file
View file

@ -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

204
_markemacht.de/dev/first design/index.html Normal file
View file

@ -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>

94
_markemacht.de/dev/first design/main.js Normal file
View file

@ -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);

230
_markemacht.de/dev/first design/manifest.html Normal file
View file

@ -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>

282
_markemacht.de/dev/first design/methode.html Normal file
View file

@ -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>

680
_markemacht.de/dev/first design/pages.css Normal file
View file

@ -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;
}
}

765
_markemacht.de/dev/first design/styles.css Normal file
View file

@ -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); }

288
_markemacht.de/index.html Normal file
View file

@ -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>

317
_markemacht.de/manifest.html Normal file
View file

@ -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>

283
_markemacht.de/methode.html Normal file
View file

@ -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>