Initial commit: Laravel-Skelett + Markenwissen-Verfassung + markemacht.de Web
Erfasst den vollständigen Projektstand mit drei Hauptbereichen:
1. Laravel 11 Application-Skelett
- Standard-Setup (app/, bootstrap/, config/, database/, public/, resources/, routes/, storage/, tests/)
- Composer + npm Konfiguration
- Devcontainer für Laravel Sail (PHP/MySQL/Redis)
- GitHub Actions Workflows (lint + tests)
- Tailwind/Vite Build-Pipeline
2. docs/ – Wissensbasis "Marke macht." (Methodik-Verfassung)
Stand nach Pflegerunde 2026-05-28:
- 00_Methodik-Verfassung: Dok. 000 (v2.0.2) bis Dok. 013 (NEU) + Anhänge
- 10_Quellen-Original: Wala, Sharp, Simon (read-only Quellen)
- 20_Markenwissen: 25 abgeleitete MW-Dokumente (Wala_MW-WAL, Sharp_MW-HBG, Simon_MW-SIM)
- 30_Synthese: Markenwissen_I_Synthese_Gesamt + Scorecard-Regeln
- 40_Implementierung: 011b-Erweiterung
- _Steuerung: 00_START_HIER, Serienübersicht, CHANGELOG.md
Letzte methodische Eingriffe:
- Methodik-Update v2.0 (Ownership Autorenschaft/Anwendung, Geltungsbereich Kernthese,
Score-Ebenen DNA-Reifegrad, Preislogik Governance-Scope)
- Dok. 013 NEU: Akquise- & Conversion-Logik (Auffahrten statt Funnel)
- Rebranding brandwork.io → Brand Rules (brand-rules.com)
- Schichtverletzungen behoben, Ordner-Symmetrie hergestellt, Verweise konsolidiert
3. _markemacht.de/ – Web-Frontend Design-Sandbox
- Statische HTML-Entwürfe (Startseite, Methode, Manifest, Denken, Blog)
- Design-System (warm_intellectualism, based_web_design)
- Assets (CSS, JS, Favicon)
Konfiguration:
- .gitignore um .DS_Store und Thumbs.db erweitert
- Lokale Git-Identity gesetzt: Kevin Adametz <kevin.adametz@me.com>
- .env wird ignoriert (nur .env.example versioniert)
Konfliktregel: Bei Spannung zwischen Code und Methodik gilt die Methodik (Dok. 000).
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
commit
2a617e09cc
237 changed files with 43706 additions and 0 deletions
223
_markemacht.de/dev/first design/artikel-marketingchef.html
Normal file
223
_markemacht.de/dev/first design/artikel-marketingchef.html
Normal 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
209
_markemacht.de/dev/first design/artikel-vergleichbarkeit.html
Normal 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
212
_markemacht.de/dev/first design/blog.html
Normal 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
573
_markemacht.de/dev/first design/content.md
Normal 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
431
_markemacht.de/dev/first design/design.de
Normal 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
406
_markemacht.de/dev/first design/design.md
Normal 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
204
_markemacht.de/dev/first design/index.html
Normal 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
94
_markemacht.de/dev/first design/main.js
Normal 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
230
_markemacht.de/dev/first design/manifest.html
Normal 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
282
_markemacht.de/dev/first design/methode.html
Normal 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
680
_markemacht.de/dev/first design/pages.css
Normal 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
765
_markemacht.de/dev/first design/styles.css
Normal 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); }
|
||||
Loading…
Add table
Add a link
Reference in a new issue