268 lines
No EOL
16 KiB
HTML
268 lines
No EOL
16 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>MARKE MACHT | Denkraum für Unternehmer</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&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"/>
|
|
<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"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"error-container": "#93000a",
|
|
"surface-dim": "#141313",
|
|
"tertiary-fixed-dim": "#cac6c3",
|
|
"on-secondary-fixed-variant": "#474747",
|
|
"secondary-container": "#474747",
|
|
"signal-primary": "#E8175D",
|
|
"surface-base": "#0A0A0A",
|
|
"on-primary-container": "#7b7979",
|
|
"on-secondary-container": "#b6b5b4",
|
|
"inverse-surface": "#e5e2e1",
|
|
"surface-container-low": "#1c1b1b",
|
|
"surface": "#141313",
|
|
"primary-container": "#0a0a0a",
|
|
"on-primary-fixed-variant": "#474646",
|
|
"on-surface": "#e5e2e1",
|
|
"on-primary": "#313030",
|
|
"error": "#ffb4ab",
|
|
"surface-tint": "#c9c6c5",
|
|
"neutral-text-dim": "#A8A7A7",
|
|
"tertiary-container": "#0b0a09",
|
|
"inverse-on-surface": "#313030",
|
|
"on-error": "#690005",
|
|
"outline": "#8e9192",
|
|
"inverse-primary": "#5f5e5e",
|
|
"surface-container-highest": "#353434",
|
|
"background": "#141313",
|
|
"secondary-fixed": "#e4e2e1",
|
|
"surface-bright": "#3a3939",
|
|
"pure-white": "#FFFFFF",
|
|
"outline-variant": "#444748",
|
|
"on-background": "#e5e2e1",
|
|
"surface-variant": "#353434",
|
|
"surface-accent": "#474747",
|
|
"tertiary": "#cac6c3",
|
|
"surface-container": "#201f1f",
|
|
"on-error-container": "#ffdad6",
|
|
"on-secondary": "#303030",
|
|
"on-tertiary-fixed": "#1d1b1a",
|
|
"surface-container-lowest": "#0e0e0e",
|
|
"on-tertiary": "#32302f",
|
|
"surface-container-high": "#2b2a2a",
|
|
"secondary-fixed-dim": "#c8c6c6",
|
|
"surface-elevated": "#363636",
|
|
"primary": "#c9c6c5",
|
|
"primary-fixed": "#e5e2e1",
|
|
"primary-fixed-dim": "#c9c6c5",
|
|
"on-tertiary-container": "#7c7977",
|
|
"tertiary-fixed": "#e6e1df",
|
|
"signal-secondary": "#CC527A",
|
|
"on-tertiary-fixed-variant": "#484645",
|
|
"on-surface-variant": "#c4c7c7",
|
|
"on-primary-fixed": "#1c1b1b",
|
|
"on-secondary-fixed": "#1b1c1c",
|
|
"secondary": "#c8c6c6"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"max-content-width": "1280px",
|
|
"section-gap-mobile": "96px",
|
|
"margin-horizontal": "8vw",
|
|
"section-gap-desktop": "160px"
|
|
},
|
|
"fontFamily": {
|
|
"body-primary": ["workSans"],
|
|
"meta-mono": ["spaceGrotesk"],
|
|
"section-headline": ["Outfit"],
|
|
"manifest-editorial": ["newsreader"],
|
|
"hero-headline": ["Outfit"]
|
|
},
|
|
"fontSize": {
|
|
"body-primary": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
|
"meta-mono": ["13px", { "lineHeight": "1.0", "letterSpacing": "0.08em", "fontWeight": "500" }],
|
|
"section-headline": ["56px", { "lineHeight": "1.1", "letterSpacing": "-0.01em", "fontWeight": "500" }],
|
|
"manifest-editorial": ["36px", { "lineHeight": "1.3", "fontWeight": "400" }],
|
|
"hero-headline": ["96px", { "lineHeight": "1.05", "letterSpacing": "-0.02em", "fontWeight": "500" }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface-base text-on-surface antialiased overflow-x-hidden selection:bg-signal-primary selection:text-pure-white">
|
|
<!-- TopNavBar Shared Component -->
|
|
<nav class="bg-[#0A0A0A] docked full-width top-0 border-b-0 tonal-shift flat no-shadows sharp-transition relative z-50">
|
|
<div class="flex justify-between items-center w-full px-12 py-8 max-w-[1440px] mx-auto">
|
|
<div class="text-xl font-black tracking-widest text-white font-outfit">MARKE MACHT</div>
|
|
<div class="hidden md:flex space-x-12">
|
|
<a class="font-outfit uppercase tracking-tighter text-[#E8175D] font-bold hover:text-[#E8175D] transition-colors duration-150" href="#">Start</a>
|
|
<a class="font-outfit uppercase tracking-tighter text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150" href="#">Manifest</a>
|
|
<a class="font-outfit uppercase tracking-tighter text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150" href="#">Methode</a>
|
|
<a class="font-outfit uppercase tracking-tighter text-stone-500 font-medium hover:text-[#E8175D] transition-colors duration-150" href="#">Denken</a>
|
|
</div>
|
|
<a class="font-meta-mono text-meta-mono text-[#E8175D] hover:text-white transition-colors duration-150 flex items-center gap-2" href="#">
|
|
Audit anfragen
|
|
<span class="material-symbols-outlined" data-icon="arrow_forward">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<!-- Hero Section -->
|
|
<header class="relative min-h-[921px] flex items-center pt-24 pb-section-gap-mobile md:pb-section-gap-desktop">
|
|
<!-- Keyvisual Monolith Fragment -->
|
|
<div class="absolute inset-y-0 right-0 w-1/3 md:w-1/2 overflow-hidden pointer-events-none opacity-40 md:opacity-100 z-0">
|
|
<div class="w-full h-full bg-cover bg-left" data-alt="Massive fragment of dark basalt or concrete, sharply angled, illuminated with a harsh magenta light edge against total darkness, abstract architectural brutalism" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBaoUBMQDrKN6Kn6aWhJWg43rD0RL0YNbWq0FxlhIvkHJOmcOea7pTuX9ha8YLPfjztpqHyUZVtn1iRK4rwgp4oQ8LGtt0HGIb3_iXNZnu7eipGFQ_hWRLHIJbH-t4r05Oo0flst7UzC76Efe4dQgqk60-Kn1wn-geRI4rHh8k3b7GmIRN8doFzlGJnwmuRSEcBV_j14knDi8OFHGdXnCrEtqrt7IwngxjD_pyQpW8TpNzZEvbp5HV365FxwKPZQgBn8awaTGnLf78'); box-shadow: inset 40px 0 100px -20px #0A0A0A;">
|
|
<!-- Overlay to blend with background -->
|
|
<div class="absolute inset-0 bg-gradient-to-r from-surface-base via-surface-base/80 to-transparent"></div>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-[1440px] mx-auto px-12 w-full relative z-10 grid grid-cols-12 gap-8">
|
|
<div class="col-span-12 md:col-span-10 lg:col-span-8 flex flex-col items-start gap-8">
|
|
<h1 class="font-hero-headline text-hero-headline text-pure-white max-w-[900px]">
|
|
Wenn Sie Ihr Unternehmen nicht erklären können, haben Sie kein Marketingproblem.
|
|
</h1>
|
|
<p class="font-manifest-editorial text-manifest-editorial text-neutral-text-dim">
|
|
Sie haben ein Markenproblem.
|
|
</p>
|
|
<div class="mt-12">
|
|
<a class="inline-flex items-center gap-4 bg-surface-elevated px-8 py-6 hover:bg-surface-bright transition-colors group" href="#symptome">
|
|
<span class="font-meta-mono text-meta-mono text-pure-white group-hover:text-signal-primary transition-colors">Warum das so ist</span>
|
|
<span class="material-symbols-outlined text-neutral-text-dim group-hover:text-signal-primary transition-colors" data-icon="south">south</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Section 01: Die Symptome -->
|
|
<section class="py-section-gap-mobile md:py-section-gap-desktop relative bg-surface" id="symptome">
|
|
<div class="max-w-[1440px] mx-auto px-12 grid grid-cols-12 gap-8">
|
|
<!-- Section Number -->
|
|
<div class="col-span-12 md:col-span-2 mb-8 md:mb-0">
|
|
<span class="font-meta-mono text-meta-mono text-neutral-text-dim">[01]</span>
|
|
</div>
|
|
<!-- Content Area -->
|
|
<div class="col-span-12 md:col-span-10 lg:col-span-8">
|
|
<h2 class="font-section-headline text-section-headline text-pure-white mb-24 max-w-[800px]">
|
|
Drei Anzeichen, dass Ihr Unternehmen sprachlich handlungsunfähig ist.
|
|
</h2>
|
|
<!-- Asymmetrical List -->
|
|
<div class="space-y-24">
|
|
<!-- Point 1 -->
|
|
<div class="grid grid-cols-12 gap-8 items-start">
|
|
<div class="col-span-12 md:col-span-4 lg:col-span-3">
|
|
<span class="font-meta-mono text-meta-mono text-signal-primary block mb-4">Symptom Eins</span>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-8 lg:col-span-9 bg-surface-elevated p-12 hover:bg-surface-bright transition-colors">
|
|
<h3 class="font-manifest-editorial text-manifest-editorial text-pure-white mb-6">Jeder erklärt anders.</h3>
|
|
<p class="font-body-primary text-body-primary text-neutral-text-dim max-w-[500px]">
|
|
Wenn drei Geschäftsführer drei unterschiedliche Antworten auf die Frage nach dem Kernangebot geben, fehlt das strategische Fundament. Die Folge: Verzettelung im Vertrieb.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Point 2 (Offset) -->
|
|
<div class="grid grid-cols-12 gap-8 items-start">
|
|
<div class="hidden md:block col-span-2 lg:col-span-3"></div>
|
|
<div class="col-span-12 md:col-span-4 lg:col-span-3">
|
|
<span class="font-meta-mono text-meta-mono text-signal-primary block mb-4">Symptom Zwei</span>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-6 lg:col-span-6 bg-surface-elevated p-12 hover:bg-surface-bright transition-colors">
|
|
<h3 class="font-manifest-editorial text-manifest-editorial text-pure-white mb-6">Kommunikation hängt an Personen.</h3>
|
|
<p class="font-body-primary text-body-primary text-neutral-text-dim">
|
|
Das Wissen über den Wert des Unternehmens existiert nur in den Köpfen weniger Experten. Es gibt kein dokumentiertes Regelwerk für neue Mitarbeiter oder Agenturen.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- Point 3 -->
|
|
<div class="grid grid-cols-12 gap-8 items-start">
|
|
<div class="col-span-12 md:col-span-4 lg:col-span-3">
|
|
<span class="font-meta-mono text-meta-mono text-signal-primary block mb-4">Symptom Drei</span>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-8 lg:col-span-7 bg-surface-elevated p-12 hover:bg-surface-bright transition-colors border-l-4 border-signal-primary">
|
|
<h3 class="font-manifest-editorial text-manifest-editorial text-pure-white mb-6">Mehr Content, weniger Wirkung.</h3>
|
|
<p class="font-body-primary text-body-primary text-neutral-text-dim">
|
|
Marketing produziert blindlings Material, das keine Haltung vermittelt. Die Lautstärke wird erhöht, weil die Substanz fehlt.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Quote Section -->
|
|
<section class="py-section-gap-mobile md:py-section-gap-desktop bg-surface-base relative flex items-center justify-center min-h-[614px]">
|
|
<div class="max-w-[1440px] mx-auto px-12 w-full text-center">
|
|
<blockquote class="max-w-[1000px] mx-auto">
|
|
<p class="font-manifest-editorial text-[48px] md:text-[72px] leading-[1.1] text-pure-white font-light tracking-tight">
|
|
"Marke ist kein Gefühl.<br/>
|
|
<span class="text-neutral-text-dim">Marke ist ein Regelwerk.</span>"
|
|
</p>
|
|
</blockquote>
|
|
</div>
|
|
</section>
|
|
<!-- Section 02: Das Problem -->
|
|
<section class="py-section-gap-mobile md:py-section-gap-desktop bg-surface">
|
|
<div class="max-w-[1440px] mx-auto px-12 grid grid-cols-12 gap-8">
|
|
<div class="col-span-12 md:col-span-2 mb-8 md:mb-0">
|
|
<span class="font-meta-mono text-meta-mono text-neutral-text-dim">[02]</span>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-8 lg:col-span-6">
|
|
<h2 class="font-section-headline text-section-headline text-pure-white mb-12">
|
|
Textklarheit erzwingt Denkklarheit.
|
|
</h2>
|
|
<div class="space-y-8 font-body-primary text-body-primary text-neutral-text-dim">
|
|
<p>
|
|
Die meisten Markenprojekte scheitern, weil sie mit Farben und Logos beginnen. Sie verwechseln Dekoration mit Identität. Wir drehen den Prozess um.
|
|
</p>
|
|
<p>
|
|
Bevor etwas gestaltet wird, muss es präzise formuliert sein. Ein Monolith aus Sprache, der nicht wackelt, wenn der Wind der Trends weht.
|
|
</p>
|
|
</div>
|
|
<div class="mt-16">
|
|
<a class="inline-flex items-center gap-4 border-b border-surface-elevated pb-4 hover:border-signal-primary transition-colors group" href="#">
|
|
<span class="font-meta-mono text-meta-mono text-pure-white group-hover:text-signal-primary transition-colors">Das Manifest lesen</span>
|
|
<span class="material-symbols-outlined text-neutral-text-dim group-hover:text-signal-primary transition-colors" data-icon="east">east</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Global CTA -->
|
|
<section class="py-section-gap-mobile md:py-section-gap-desktop bg-surface-base border-t border-surface-elevated">
|
|
<div class="max-w-[1440px] mx-auto px-12 flex flex-col items-center text-center">
|
|
<h2 class="font-hero-headline text-[64px] md:text-hero-headline text-pure-white mb-12">
|
|
Bereit für Klarheit?
|
|
</h2>
|
|
<a class="bg-pure-white text-surface-base font-meta-mono text-meta-mono px-12 py-6 hover:bg-signal-primary hover:text-pure-white transition-colors duration-300" href="#">
|
|
Audit anfragen
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<!-- Footer Shared Component -->
|
|
<footer class="bg-[#0A0A0A] full-width border-t border-stone-800 flat grid grid-cols-12 px-12 py-16 w-full max-w-[1440px] mx-auto">
|
|
<div class="col-span-12 md:col-span-6 mb-8 md:mb-0">
|
|
<p class="font-sans text-sm tracking-tight text-stone-600">© MARKE MACHT. DENKRAUM FÜR UNTERNEHMER.</p>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-6 flex flex-col md:flex-row md:justify-end gap-6 md:gap-12">
|
|
<a class="font-sans text-sm tracking-tight text-stone-600 hover:text-[#E8175D] transition-colors" href="#">Impressum</a>
|
|
<a class="font-sans text-sm tracking-tight text-stone-600 hover:text-[#E8175D] transition-colors" href="#">Datenschutz</a>
|
|
<a class="font-sans text-sm tracking-tight text-stone-600 hover:text-[#E8175D] transition-colors" href="#">Kontakt</a>
|
|
</div>
|
|
</footer>
|
|
</body></html> |