318 lines
No EOL
20 KiB
HTML
318 lines
No EOL
20 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="de"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Denken - markemacht.de</title>
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400..700;1,400..700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Space+Grotesk:wght@300..700&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": {
|
|
"on-tertiary-fixed-variant": "#7a2f15",
|
|
"surface-bright": "#fbfaf2",
|
|
"on-error-container": "#93000a",
|
|
"on-secondary-fixed-variant": "#910035",
|
|
"tertiary-container": "#390b00",
|
|
"surface-container": "#efeee6",
|
|
"primary-fixed-dim": "#c8c6c5",
|
|
"on-surface-variant": "#444748",
|
|
"tertiary": "#000000",
|
|
"tertiary-fixed-dim": "#ffb59e",
|
|
"on-tertiary": "#ffffff",
|
|
"error": "#ba1a1a",
|
|
"outline": "#747878",
|
|
"on-secondary-fixed": "#400013",
|
|
"primary-container": "#1c1b1b",
|
|
"surface": "#fbfaf2",
|
|
"surface-dim": "#dbdad3",
|
|
"surface-container-low": "#f5f4ec",
|
|
"primary": "#000000",
|
|
"secondary": "#b80046",
|
|
"on-primary-fixed-variant": "#474746",
|
|
"background": "#fbfaf2",
|
|
"secondary-fixed-dim": "#ffb2bc",
|
|
"on-primary-fixed": "#1c1b1b",
|
|
"on-background": "#1b1c17",
|
|
"on-primary-container": "#858383",
|
|
"tertiary-fixed": "#ffdbd0",
|
|
"inverse-primary": "#c8c6c5",
|
|
"on-primary": "#ffffff",
|
|
"surface-variant": "#e3e3db",
|
|
"surface-container-high": "#e9e8e1",
|
|
"inverse-surface": "#30312c",
|
|
"outline-variant": "#c4c7c7",
|
|
"on-surface": "#1b1c17",
|
|
"on-error": "#ffffff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"primary-fixed": "#e5e2e1",
|
|
"secondary-container": "#e4115a",
|
|
"inverse-on-surface": "#f2f1e9",
|
|
"on-tertiary-fixed": "#390b00",
|
|
"surface-tint": "#5f5e5e",
|
|
"on-tertiary-container": "#c8694b",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-container": "#fffbff",
|
|
"surface-container-highest": "#e3e3db",
|
|
"secondary-fixed": "#ffd9dd",
|
|
"on-secondary": "#ffffff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"margin": "32px",
|
|
"gutter": "24px",
|
|
"sm": "16px",
|
|
"base": "4px",
|
|
"lg": "48px",
|
|
"xl": "80px",
|
|
"md": "24px",
|
|
"xs": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"body-editorial": [
|
|
"Noto Serif"
|
|
],
|
|
"accent-label": [
|
|
"Space Grotesk"
|
|
],
|
|
"h1": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"h3": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"h2": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"body-ui": [
|
|
"Plus Jakarta Sans"
|
|
]
|
|
},
|
|
"fontSize": {
|
|
"body-editorial": [
|
|
"18px",
|
|
{
|
|
"lineHeight": "1.6",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"accent-label": [
|
|
"13px",
|
|
{
|
|
"lineHeight": "1",
|
|
"letterSpacing": "0.05em",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"h1": [
|
|
"48px",
|
|
{
|
|
"lineHeight": "1.1",
|
|
"letterSpacing": "-0.02em",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"h3": [
|
|
"24px",
|
|
{
|
|
"lineHeight": "1.3",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"h2": [
|
|
"32px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"letterSpacing": "-0.01em",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"body-ui": [
|
|
"16px",
|
|
{
|
|
"lineHeight": "1.5",
|
|
"fontWeight": "400"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
/* Custom utilities based on style guidance */
|
|
.ambient-shadow-sm {
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
|
|
}
|
|
.ambient-shadow-md {
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body-ui antialiased selection:bg-secondary selection:text-on-secondary min-h-screen flex flex-col">
|
|
<!-- TopNavBar -->
|
|
<header class="bg-[#F9F8F0] dark:bg-stone-950 docked full-width top-0 border-b border-b border-[#E6E1D3] dark:border-stone-800 flat no shadows z-50 sticky">
|
|
<div class="flex justify-between items-center w-full px-8 py-4 max-w-[1280px] mx-auto">
|
|
<!-- Brand Logo -->
|
|
<a class="font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight text-xl font-bold text-[#191919] dark:text-stone-50 active:scale-95 transition-transform" href="#">
|
|
markemacht.de
|
|
</a>
|
|
<!-- Navigation Links (Desktop) -->
|
|
<nav class="hidden md:flex items-center gap-8">
|
|
<a class="font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight text-[#191919] dark:text-stone-400 opacity-80 hover:text-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">Start</a>
|
|
<a class="font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight text-[#191919] dark:text-stone-400 opacity-80 hover:text-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">Manifest</a>
|
|
<a class="font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight text-[#191919] dark:text-stone-400 opacity-80 hover:text-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">Methode</a>
|
|
<!-- Active Item -->
|
|
<a class="font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight text-[#E8175D] border-b-2 border-[#E8175D] pb-1 hover:text-[#E8175D] transition-colors duration-200 active:scale-95 transition-transform" href="#">Denken</a>
|
|
</nav>
|
|
<!-- Trailing Action -->
|
|
<a class="hidden md:inline-flex bg-[#191919] text-white px-6 py-2 rounded-lg font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight hover:bg-[#E8175D] transition-colors active:scale-95 transition-transform" href="#">
|
|
Audit anfragen
|
|
</a>
|
|
<!-- Mobile Menu Toggle -->
|
|
<button class="md:hidden text-[#191919] dark:text-stone-100">
|
|
<span class="material-symbols-outlined">menu</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="flex-grow w-full max-w-[1280px] mx-auto px-margin pb-xl">
|
|
<!-- Header Section -->
|
|
<section class="py-xl border-b border-surface-variant mb-lg">
|
|
<h1 class="font-h1 text-h1 text-on-surface mb-gutter">Denken</h1>
|
|
<p class="font-body-editorial text-body-editorial text-on-surface-variant max-w-[720px]">
|
|
Einblicke, Reflexionen und methodische Ansätze zur Entwicklung starker, wirksamer Marken in einer komplexen Welt. Wir teilen unsere Perspektiven an der Schnittstelle von Strategie, Kultur und Design.
|
|
</p>
|
|
</section>
|
|
<!-- Filters Section -->
|
|
<section class="mb-lg flex flex-wrap items-center gap-xs">
|
|
<span class="font-accent-label text-accent-label mr-sm text-outline">Kategorien:</span>
|
|
<button class="font-accent-label text-accent-label px-sm py-xs rounded-full bg-primary text-on-primary border border-primary transition-colors">Alle</button>
|
|
<button class="font-accent-label text-accent-label px-sm py-xs rounded-full bg-transparent text-on-surface-variant border border-outline-variant hover:bg-surface-container-high transition-colors">Strategie</button>
|
|
<button class="font-accent-label text-accent-label px-sm py-xs rounded-full bg-transparent text-on-surface-variant border border-outline-variant hover:bg-surface-container-high transition-colors">Kultur</button>
|
|
<button class="font-accent-label text-accent-label px-sm py-xs rounded-full bg-transparent text-on-surface-variant border border-outline-variant hover:bg-surface-container-high transition-colors">Design</button>
|
|
<button class="font-accent-label text-accent-label px-sm py-xs rounded-full bg-transparent text-on-surface-variant border border-outline-variant hover:bg-surface-container-high transition-colors">Technologie</button>
|
|
</section>
|
|
<!-- Bento Grid Layout -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
|
|
<!-- Featured Article (Spans Full Width, Split Layout) -->
|
|
<article class="col-span-1 md:col-span-12 bg-surface-container-lowest rounded-lg ambient-shadow-sm hover:ambient-shadow-md transition-shadow duration-300 overflow-hidden group cursor-pointer grid grid-cols-1 md:grid-cols-2">
|
|
<div class="relative h-[300px] md:h-auto overflow-hidden">
|
|
<img alt="Featured Article Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" data-alt="top-down view of neat minimal desk with an open notebook, elegant fountain pen, and soft morning shadows on warm textured paper" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxg2BXElZySWQADtnWzWT60grCTHPLxwbhAuKZwMo-3Uc6jHNYcOo2KWXhS6PT_LDLR0KiJqw-efzwvrNksLqCqIpr89WacyHYYL2W58VmfhaKBulPQ1lVRAo3nmR6cTrz31mwtblZ3wi8taqklW4s-k-bDYlmpGuW1Hc0sorAwQ3zQkLvyt-ZhHCrPVMEvSyMBTGHEmnvgsopr7_GcKs5TZGF8u6c1cHgBTMk8Mu0pF59n8OmZmFo1uVeBhbT51H2xmFVXXZMa60"/>
|
|
</div>
|
|
<div class="p-lg flex flex-col justify-center border-l border-surface-variant">
|
|
<div class="flex items-center gap-sm mb-md">
|
|
<span class="font-accent-label text-accent-label px-xs py-base bg-secondary-container text-on-secondary-container rounded">Strategie</span>
|
|
<span class="font-body-ui text-[13px] text-outline">Lesezeit: 8 Min</span>
|
|
</div>
|
|
<h2 class="font-body-editorial text-h2 text-on-surface mb-md group-hover:text-secondary transition-colors duration-300">
|
|
Die Architektur der Bedeutung: Warum Markenbildung mehr als nur Oberfläche ist
|
|
</h2>
|
|
<p class="font-body-ui text-body-ui text-on-surface-variant mb-lg max-w-[500px]">
|
|
In einer Welt des visuellen Überflusses reicht kosmetisches Design nicht aus. Wir untersuchen, wie tiefe strategische Fundamente die Resilienz und Strahlkraft einer Marke definieren.
|
|
</p>
|
|
<div class="mt-auto flex items-center text-primary font-accent-label text-accent-label group-hover:gap-xs transition-all">
|
|
Weiterlesen <span class="material-symbols-outlined text-[16px] ml-1">arrow_forward</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<!-- Standard Card 1 -->
|
|
<article class="col-span-1 md:col-span-6 lg:col-span-4 bg-surface-container-lowest rounded-lg ambient-shadow-sm hover:ambient-shadow-md transition-shadow duration-300 overflow-hidden flex flex-col group cursor-pointer">
|
|
<div class="relative aspect-[4/3] overflow-hidden border-b border-surface-variant">
|
|
<img alt="Article Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" data-alt="abstract architectural detail of curved concrete forms with warm sunlight casting sharp geometric shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXlk4qOildqTq5tLdsuQVRL4-QsawMEys9DyCMDZpvS3tPEzRUjP3TWoNyQTYierH_SkFcuDverExwa6kjGH8ydNG1nTgM4aUsGSY3RJeb7XGw6ybzQT_T5a0_aA1Cz4pIzOYQlUqGP_SlFQ7iqV3AIHRf4VFKJR0QCxLiqBqCzeBxpmTlu9e5QdblJqw7w8G74UVQO8JnkQr5TJsCgnBbdT-mGr1W2KdYoYZ3by83MTF_3cOrgkP4NEid-PD_CVBVT8dNcJX9lSQ"/>
|
|
</div>
|
|
<div class="p-margin flex flex-col flex-grow">
|
|
<span class="font-accent-label text-accent-label text-on-tertiary-fixed-variant mb-sm block">Design</span>
|
|
<h3 class="font-body-editorial text-h3 text-on-surface mb-sm group-hover:text-secondary transition-colors duration-300">
|
|
Ästhetische Kohärenz im digitalen Raum
|
|
</h3>
|
|
<p class="font-body-ui text-body-ui text-on-surface-variant line-clamp-3 mb-margin">
|
|
Wie Systeme helfen, Wildwuchs zu vermeiden und ein einheitliches Markenerlebnis über unzählige Touchpoints hinweg zu gewährleisten.
|
|
</p>
|
|
<div class="mt-auto flex items-center justify-between border-t border-surface-variant pt-sm">
|
|
<span class="font-body-ui text-[13px] text-outline">12. Okt 2023</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<!-- Standard Card 2 -->
|
|
<article class="col-span-1 md:col-span-6 lg:col-span-4 bg-surface-container-lowest rounded-lg ambient-shadow-sm hover:ambient-shadow-md transition-shadow duration-300 overflow-hidden flex flex-col group cursor-pointer">
|
|
<div class="relative aspect-[4/3] overflow-hidden border-b border-surface-variant">
|
|
<img alt="Article Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" data-alt="soft focus image of a team collaborating around a wooden table in a sunlit studio with organic shapes and warm tones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBlaM87gVMd3ycN3cDvclUhIObXF6ERasyeiN_U1ibLUHRUtho3wJEX6QydM-UksmjABiL_JoFAtl9079UKifZbuEtBVGdD3l4dfQUh_DA7SqTc33BGNmv99Oh4Z3gIrZO1RDAwK4zPbvqeKdZqmutl3MQX5lxCVfq8pKAn129o0eHVhvq-Zqp0oYZQxHr0HPtH0HpZMbrVUvp-6zzGvbb3j58TJi_3AHNeqy9Sc_h_BQMSdOhgOqAiMxsuWJhEQ2N5_JEjXElgQZw"/>
|
|
</div>
|
|
<div class="p-margin flex flex-col flex-grow">
|
|
<span class="font-accent-label text-accent-label text-on-tertiary-fixed-variant mb-sm block">Kultur</span>
|
|
<h3 class="font-body-editorial text-h3 text-on-surface mb-sm group-hover:text-secondary transition-colors duration-300">
|
|
Die Marke von Innen nach Außen leben
|
|
</h3>
|
|
<p class="font-body-ui text-body-ui text-on-surface-variant line-clamp-3 mb-margin">
|
|
Employer Branding ist kein Buzzword, sondern die authentische Reflexion der Unternehmenskultur. Ein Plädoyer für Ehrlichkeit.
|
|
</p>
|
|
<div class="mt-auto flex items-center justify-between border-t border-surface-variant pt-sm">
|
|
<span class="font-body-ui text-[13px] text-outline">28. Sep 2023</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<!-- Standard Card 3 -->
|
|
<article class="col-span-1 md:col-span-6 lg:col-span-4 bg-surface-container-lowest rounded-lg ambient-shadow-sm hover:ambient-shadow-md transition-shadow duration-300 overflow-hidden flex flex-col group cursor-pointer">
|
|
<div class="relative aspect-[4/3] overflow-hidden border-b border-surface-variant">
|
|
<img alt="Article Image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 ease-out" data-alt="close-up of a person's hands holding a warmly lit tablet showing complex data visualizations in a cozy library setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCSpj5RHZUPZe-8qVQlvNddNN8hjUqTDxVrS1jycDOWGAp3VFjcYUWRHNUj--jEOknD43H842bd_xNNOBpwGdzM2Cxi64R_urugJkOsvmcIkByELXFdZAd1_ZQZrxc-H9L3xGd7_S50FPyvDlmgxBI3a3nutrsSq1EpAG20Ipg_Ludk8xSVXbSxfsLj0QdWb1bUVN3jbcDFeHrJkkQjXQZX-bedmpbmAxatpG73vn84V5dTvTHDMEqm2xdzCjRn2F7LC-s89m7Z0EE"/>
|
|
</div>
|
|
<div class="p-margin flex flex-col flex-grow">
|
|
<span class="font-accent-label text-accent-label text-on-tertiary-fixed-variant mb-sm block">Technologie</span>
|
|
<h3 class="font-body-editorial text-h3 text-on-surface mb-sm group-hover:text-secondary transition-colors duration-300">
|
|
KI als Werkzeug, nicht als Autor
|
|
</h3>
|
|
<p class="font-body-ui text-body-ui text-on-surface-variant line-clamp-3 mb-margin">
|
|
Gedanken zur Integration künstlicher Intelligenz in den kreativen Prozess, ohne die menschliche Intuition zu opfern.
|
|
</p>
|
|
<div class="mt-auto flex items-center justify-between border-t border-surface-variant pt-sm">
|
|
<span class="font-body-ui text-[13px] text-outline">05. Sep 2023</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<!-- Pagination / Load More -->
|
|
<div class="flex justify-center mt-xl">
|
|
<button class="bg-transparent border border-primary text-primary px-lg py-sm rounded-lg font-body-ui font-medium hover:bg-surface-variant transition-colors">
|
|
Weitere Beiträge laden
|
|
</button>
|
|
</div>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="bg-[#F9F8F0] dark:bg-stone-950 docked full-width border-t border-t border-[#E6E1D3] dark:border-stone-800 flat no shadows mt-auto">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 w-full px-8 py-12 max-w-[1280px] mx-auto">
|
|
<!-- Brand & Copyright -->
|
|
<div class="flex flex-col gap-4">
|
|
<span class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-lg font-black text-[#191919] dark:text-stone-50">
|
|
markemacht.de
|
|
</span>
|
|
<p class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 dark:text-stone-500">
|
|
© 2024 markemacht.de. Alle Rechte vorbehalten.
|
|
</p>
|
|
</div>
|
|
<!-- Links -->
|
|
<div class="flex flex-col md:flex-row gap-6 md:justify-end items-start md:items-center">
|
|
<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 dark:text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80 transition-opacity" href="#">Impressum</a>
|
|
<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 dark:text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80 transition-opacity" href="#">Datenschutz</a>
|
|
<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 dark:text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80 transition-opacity" href="#">Kontakt</a>
|
|
<a class="font-['Plus_Jakarta_Sans'] text-xs uppercase tracking-widest text-stone-500 dark:text-stone-500 hover:text-[#E8175D] transition-colors opacity-100 hover:opacity-80 transition-opacity" href="#">LinkedIn</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body></html> |