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