`, korrekte Heading-Hierarchie.
+- ARIA: Drawer (`aria-hidden`, `aria-controls`, `aria-expanded`), Wirkung-Switch (`role="group"`, `aria-pressed`).
+- Magenta nie als einziges Unterscheidungsmerkmal (zusätzlich Unterstrich/Kontext).
+- Eigene `@media print`-Regeln (Serif, Schwarz/Weiß, Nav/Footer/Keyvisual ausgeblendet).
+- Ziel: WCAG 2.1 AA.
+
+---
+
+## 11. Seitenstruktur (Ist-Stand)
+
+| Seite | Datei | Inhalt (Kurz) |
+|---|---|---|
+| Start | `index.html` | Hero (Diagnose-These) · Symptome [01] · Zitat · Kernthese · Audit-CTA |
+| Manifest | `manifest.html` | Hero · Einleitung · Zentralthese · Vier Konsequenzen · Überleitung |
+| Methode | `methode.html` | Hero „Brand Engineering“ · Haltung · Theorie→Praxis · Fünf DNA-Bausteine · Der Architekt · Audit-Überleitung |
+| Denken | `denken.html` | Blog-Übersicht (monolith Langform-Zeilen / editorial volle-Breite-Karten, ohne Bilder) — jeder Beitrag verlinkt auf seine Detailseite |
+| Beitrag (Detail) | `denken-*.html` | Essay-Detailseite: Artikelkopf (Meta · Titel · Dek) · Essay-Body (Serife) · Weiterlesen · Audit-CTA. Vorlagen: `denken-agilitaet`, `denken-architektursanierung`, `denken-fuehrung-durch-reduktion` |
+| Audit | `audit.html` | Eigene Anfrage-Seite: Diagnose-These · typische Auslöser · Ablauf · Mailto-Anfrage |
+
+- **Navigation (kanonisch):** Start · Manifest · Methode · Denken · CTA „Audit anfragen“ (→ `audit.html`).
+- **Marken-DNA** in `methode.html` = exakt die fünf Bausteine aus Wissensdokument 002 (Identitätskern, Positionierungslogik, Sprach-/Tonalitätsregeln, Themen-/Relevanzrahmen, Entscheidungs-/Grenzregeln).
+- **Footer:** Copyright + „Keine Cookies, kein Tracking.“ + Links Impressum/Datenschutz/Kontakt (aktuell `#`-Platzhalter).
+
+---
+
+## 12. Offene Punkte (vor „Design final“ zu entscheiden)
+
+1. **Dual-Mode behalten?** Bleiben beide Wirkungen (monolith + editorial) dauerhaft, oder wird auf eine finalisiert?
+2. **Schriftwahl + Self-Hosting:** aktuelle Familien bestätigen oder auf Briefing-Familien angleichen; Google-Fonts → self-hosted (Performance/Privacy).
+3. **Echter Monolith-Asset** statt CSS-Platzhalter (3D/Foto/KI gemäß Dok. 19).
+4. **Footer-Links** mit echten Zielen belegen (Impressum, Datenschutz, Kontakt `info@markemacht.de`).
+5. **Audit:** Anfrageprozess/Formular finalisieren; aktuell eigene Seite `audit.html` mit Mailto-Anfrage.
+6. **Dok. 19 (Keyvisual-Briefing)** ist als veraltet markiert und sollte mit diesem Stand harmonisiert werden (u. a. Akzent = Magenta, nicht „Blau“).
+7. **Doppelter Projektordner `Marke Macht 2/`** entfernen/ignorieren — kanonisch ist `_markemacht.de/`.
+
+---
+
+### Ende — DESIGN.md (Ist-Stand der Live-Implementierung; wird mit den nachgereichten Design-Informationen finalisiert)
diff --git a/_markemacht.de/Deignkorrekturen.md b/_markemacht.de/Deignkorrekturen.md
new file mode 100644
index 0000000..8d30e7e
--- /dev/null
+++ b/_markemacht.de/Deignkorrekturen.md
@@ -0,0 +1,166 @@
+# Marke macht. — Designkorrekturen (Schritt 1: Design)
+
+**Scope:** Nur Erscheinungsbild, Struktur, Token — **seitenübergreifend** (Start, Manifest, Denken). **Keine Copy-Änderungen** (das ist Schritt 2). Bilder kommen als letzter Schritt — hier nur Platzhalter-Regeln.
+**Referenz-Variante:** „monolithisch" (dunkel). Regeln gelten für beide Wirkungen, außer wo explizit eine Variante genannt ist.
+**Grundsatz für alle Änderungen:** Magenta = Signal, nicht Fläche. Jede Schrift hat einen Job. Kanten sind hart (monolithisch) bzw. leicht weich (editorial). Invariant ist der Inhalt, nicht das Layout.
+
+---
+
+## 1. Design-Token (Source of Truth)
+
+Bestehende Werte beibehalten, wo vorhanden. Hex-Werte sind Startwerte zum Kalibrieren.
+
+### Farbe
+
+| Token | monolithisch (dunkel) | editorial (hell) | Zweck |
+|---|---|---|---|
+| `--bg` | `#0B0B0C` | bestehender Creme-Ton | Grundfläche |
+| `--surface` (Karten) | `#121214` | `#FFFFFF` | Karten/Container |
+| `--ink` | `#F4F2EE` | near-black | Haupttext |
+| `--muted` | `#8C8C92` | gedämpftes Grau | Sekundärtext |
+| `--line` | `#26262B` | `#E7E4DD` | Trennlinien, Rahmen |
+| `--signal` (Magenta) | bestehender Magenta-Token (≈ `#F31E6B`) | identisch | **nur Signal** |
+
+> Magenta-Wert **nicht** ändern. Geändert wird ausschließlich, **wo** und **wie viel** Magenta erscheint (siehe §2 und CHG-01).
+
+### Schrift-Rollen
+
+| Token | Familie (bestehend) | Job |
+|---|---|---|
+| `--font-grotesk` | eure Grotesk, eng/schwer | Headlines, Sektions-Titel, Karten-Titel — die „gebaute" Stimme |
+| `--font-serif` | eure Serife | **Denk-Stimme**: Zitate + Manifest + Denken-Essays |
+| `--font-mono` | eure Monospace | System/Meta: Sektions-Labels, Symptom-Labels, Button-Text, Datum |
+
+### Form / Radius (Wirkungs-Token — bewusst unterschiedlich)
+
+| Token | monolithisch | editorial | Zweck |
+|---|---|---|---|
+| `--radius` | `0` | `8px` (umgesetzt) | Härte-vs-Weichheit als Träger des Wirkungsunterschieds |
+
+> Der Radius ist **gewollt** ungleich: monolithisch eckig/Beton, editorial etwas weicher. Im editorial **ein** Radius-Wert konsequent auf alle Elemente (Karten, Buttons, Slots, Toggle, Filter), damit „weicher" nicht in „verspielt" kippt.
+
+---
+
+## 2. Globale Regeln (gelten für die ganze Seite)
+
+- **R1 — Magenta-Budget:** Magenta erscheint ausschließlich an diesen Stellen: aktiver Nav-Zustand · das eine Hero-Wort „Marketingproblem" · Mono-Signal-Labels (`SYMPTOM 0X`) · 2px-Oberkante an genau **einer** Diagnose-Karte · primärer Action-Link („Audit anfragen"). Sonst nirgends.
+- **R2 — Magenta nie als Fläche:** keine gefüllten Magenta-Pills/-Badges, keine Magenta-Hintergründe, keine Glows. Max. Magenta-Fläche pro Element = Linie/Kante bis 2px oder reiner Text.
+- **R3 — Keine Farbverläufe:** alle Gradienten raus (Hero-Bildfläche, Karten-Bildflächen, weiche Glows). Platzhalter = flacher Flächenton in `--surface`/`--line`, kein Verlauf.
+- **R4 — Radius ist Wirkungs-Token, nicht global:** `--radius` = `0` (monolithisch), kleiner einheitlicher Wert ≈ `4px` (editorial). Der Unterschied ist gewollt und trägt die Wirkung; **nicht** global vereinheitlichen.
+- **R5 — Trennung über Linien, nicht Schatten:** Sektionen und Karten durch 1px `--line` trennen. Keine `box-shadow`-Tiefen.
+- **R6 — Invariant ist der Inhalt, nicht das Layout:** Über beide Wirkungen bleiben *Inhalt, Reihenfolge und Hierarchie* identisch (Kern). *Anordnung, Radius, Raum* sind Ausdruck und dürfen je Wirkung abweichen (Dok. 010: Kern fix, Form beweglich). Bedingung: variierende Anordnung muss **rasterbasiert/regelhaft** sein, nicht freihändig.
+- **R7 — Schrift-Job-Test:** für jede Magenta-Stelle und jede Serif-Stelle muss in einem Satz begründbar sein, warum sie dort steht. Wenn nicht → Dekoration → entfernen.
+- **R8 — Stimmen-Regel (seitenübergreifend):** Die *Rolle* der Serife ist konstant = „die denkende/erhobene Stimme". Ihr *Umfang* richtet sich nach Inhaltstyp:
+ - Serife → erhobene Aussagen, Zitate, reflektierende Schlusssätze (Start, Manifest) **und** der laufende Essay-Body auf Artikel-Seiten (Denken).
+ - Grotesk → Headlines, Karten-/Strukturinhalte, kurze diagnostische Erklär-/Teaser-Texte, UI.
+ - Mono → Meta-Labels, System-Marker, Button-Text, Datum.
+ Kein Schriftwechsel *innerhalb* eines zusammenhängenden Gedankens; wo Stimme und Struktur aufeinandertreffen, entscheidet Hierarchie (siehe CHG-09), nicht ein Mix.
+
+---
+
+## 3. Konkrete Änderungen
+
+### CHG-01 — Magenta-Pills durch Magenta-Text ersetzen
+**Wo:** alle Label-Pills (z. B. `SYMPTOM 01/02/03`; im hellen Layout zusätzlich Kategorie-Tags, sofern vorhanden).
+**Statt:** Text in gefüllter Magenta-Pille.
+**Soll:** Label in `--font-mono`, Versalien, Letter-Spacing ≈ 2px, Farbe `--signal`, **kein** Hintergrund, kein Border.
+**Prüfkriterium:** keine gefüllte Magenta-Fläche mehr im DOM; Labels lesen als reiner farbiger Mono-Text.
+
+### CHG-02 — Verläufe entfernen (Platzhalter)
+**Wo:** Hero-Bild-Slot (rechts oben), alle Karten-Bildflächen, dekorative Glows.
+**Soll:** flacher Flächenton (`--surface` bzw. 1 Stufe neben `--bg`), kein `linear-/radial-gradient`. Slot-Format und Position bleiben.
+**Prüfkriterium:** kein `gradient()` in den betroffenen Flächen; Platzhalter ist einfarbig matt.
+
+### CHG-03 — Symptom-Karten: Anordnung je Wirkung gewollt unterschiedlich
+**Wo:** Sektion `[01] DIAGNOSE`.
+**Soll:** Anordnung bleibt bewusst verschieden — monolithisch **versetzt/gestaffelt**, editorial **geordnet**. Invariant über beide Wirkungen: Reihenfolge 01 → 02 → 03, gleiche Gewichtung der drei Karten, Magenta-Kante auf Karte 03 (siehe CHG-04).
+**Bedingung:** Der Versatz im monolithischen Bereich ist **rasterbasiert** — ein konsequenter, gleicher Versatz-Schritt, an der Baseline verankert (liest sich als konstruiert/engineered, nicht als zufälliger Scatter).
+**Prüfkriterium:** Reihenfolge und Hierarchie in beiden Varianten gleich; der Versatz folgt einem festen Raster-Schritt, nicht freien Pixelwerten.
+
+### CHG-04 — Diagnostische Kante nur an Karte 03
+**Wo:** Symptom-Karten.
+**Soll:** Karte 01 und 02 = Oberkante 1px `--line`. Karte 03 (zugespitzt) = Oberkante **2px `--signal`**. Sonst keine farbigen Kanten.
+**Prüfkriterium:** genau eine Karte trägt eine Magenta-Kante.
+
+### CHG-05 — Schrift-Rollen sauber zuordnen
+**Wo:** ganze Seite.
+**Soll:**
+- `--font-grotesk`: Hero-H1, „Drei Anzeichen…", „Textklarheit erzwingt Denkklarheit", Karten-Titel.
+- `--font-serif`: **nur** das Zitat „Marke ist kein Gefühl. Marke ist ein Regelwerk." — zweite Zeile in `--muted`.
+- `--font-mono`: `[00]/[01]/[02]`, `SYMPTOM 0X`, Button-Text, Datum.
+- Diagnose-Fließtext (Symptom-Beschreibungen) bleibt **Grotesk/Sans**, gedämpft — **keine** Serife.
+**Prüfkriterium:** Serife taucht auf Start ausschließlich im Zitat auf.
+
+### CHG-06 — Radius als Wirkungs-Token umsetzen
+**Wo:** Karten, Buttons, Bild-Slots, Wirkung-Toggle, Filter-Elemente.
+**Soll:** `border-radius: var(--radius)` mit `--radius: 0` (monolithisch) und `--radius: 8px` (editorial — umgesetzt; 4px war zu wenig Differenz). Im editorial **derselbe** Wert auf alle genannten Elemente.
+**Prüfkriterium:** monolithisch durchgehend eckig; editorial durchgehend gleich leicht gerundet — kein gemischter Radius innerhalb einer Wirkung. Obergrenze ~8px, sonst verliert auch editorial die „Beton"-Härte.
+
+### CHG-07 — Sektions-Trennung & Rhythmus
+**Wo:** zwischen allen Sektionen.
+**Soll:** volle 1px-Trennlinie `--line`; vertikales Sektions-Padding großzügig (Startwert `clamp(64px, 8vw, 96px)`); keine Schatten als Trenner.
+**Prüfkriterium:** Sektionsgrenzen sind Linien, keine Schlagschatten.
+
+### CHG-08 — Hero-Bild-Slot vorbereiten (für späteren Bild-Schritt)
+**Wo:** Hero, rechts oben.
+**Soll:** Slot bleibt reserviert, **angeschnitten** (darf Viewport/Containerkante schneiden), viel Negativraum, Kante per `var(--radius)`. Bis zum Bild: flacher `--surface`-Ton **ohne** sichtbaren Rahmen (sonst liest sich der leere Slot als „Bild fehlt" statt als gewollter Raum).
+**Prüfkriterium:** Slot ist rechteckig, randständig, ohne Verlauf, ohne wirkende Platzhalter-Umrandung.
+
+### CHG-09 — Hervorgehobene Aussage (Lead-Muster, seitenübergreifend)
+**Wo:** erhobene Kern-Aussagen (z. B. Manifest-Lead „In den meisten Unternehmen wird »Marke«…").
+**Soll:** Serife, leicht eingerückt, mit linker 2–3px-`--signal`-Rule. Eine evtl. nachfolgende, erläuternde Fortsetzung bleibt zurücktretender Sans-Body in `--muted`. Die Magenta-Rule macht den Schrift-/Gewichtswechsel als *gewollte Hierarchie* lesbar, nicht als Bruch.
+**Prüfkriterium:** Lead = Serife + Magenta-Rule + Einrückung; Fortsetzung = Sans/gedämpft; kein Schriftwechsel ohne dieses Hierarchie-Signal.
+
+### CHG-10 — Karten als ein System (seitenübergreifend)
+**Wo:** Symptom-Karten (Start), Konsequenz-Karten (Manifest), Bausteine (Methode), Index-Einträge (Denken).
+**Soll:** eine gemeinsame Karten-Sprache: Mono-Magenta-Label, Grotesk-Titel, Sans-Body; Anordnung je Wirkung (gestaffelt monolithisch / geordnet editorial, rasterbasiert). Für die Magenta-Hervorhebung gilt eine **Set-Typ-Unterscheidung**:
+- **Argument-Set** (steigert sich auf eine Pointe zu: Start-Symptome, Manifest-Konsequenzen) → **genau eine** Karte trägt die 2px-`--signal`-Oberkante, und zwar die inhaltlich stärkste/zugespitzte (Climax, nicht nur „die letzte").
+- **Aufzählungs-Set** (gleichwertige Elemente ohne Zuspitzung: Methode-„Fünf Bausteine", Denken-Index) → **keine** Hervorhebung, **keine** Magenta-Kante. Gleichgewichtung ist hier die Aussage. Das gilt ausdrücklich auch für „Grenzregeln": trotz des thematischen „roten Bereichs" **keine** Sonder-Kante, da sich das Set nicht zuspitzt.
+**Prüfkriterium:** identische Karten-Tokens über alle Seiten; Argument-Sets genau eine Magenta-Kante (auf der stärksten Karte); Aufzählungs-Sets keine.
+
+---
+
+### Denken (Index + Artikel)
+
+### CHG-11 — Denken-Index: bildlose Liste, gleichgewichtet
+**Wo:** Übersichtsseite „Denken".
+**Soll:**
+- **Form:** Beitrags-Liste über die volle Breite in **beiden** Wirkungen (Meta links: Kategorie + Datum; rechts: Titel + kurzer Teaser; Einträge durch Haarlinien `--line` getrennt). **Kein** Karten-/Bild-Grid. Der Wirkungsunterschied wird über Farbe/Kontrast/Radius getragen, nicht über Liste-vs-Grid.
+- **Typo:** Seiten-Intro („Ein Denkraum für Klarheit…") = Serife (erhobene Stimme); Beitrags-Titel = Grotesk; Teaser = Sans/gedämpft; Meta (Kategorie, Datum) = Mono.
+- **Bilder:** **keine** dekorativen Beitragsbilder/Thumbnails. Ausnahme nur, wenn ein Bild *selbst Substanz ist* (Diagramm/Struktur-Skizze, die das Argument trägt). Der eine reservierte Marken-Hero-Slot oben darf bleiben; die Beitragsliste bleibt bildlos.
+- **Gewichtung:** alle Beiträge **gleich** behandelt, chronologisch. **Kein** „Featured", keine Hervorhebung, keine Magenta-Kante auf einzelnen Beiträgen. Hervorhebung passiert ausschließlich extern (Social/Newsletter), nie im Verzeichnis selbst.
+**Prüfkriterium:** identische Listenform in beiden Wirkungen; keine Beitragsbilder; kein Eintrag visuell bevorzugt; Serife nur im Intro.
+
+### CHG-12 — Kein Filter-UI (vorerst); Kategorien nur als Labels
+**Wo:** Filterzeile und Kategorie-Auszeichnung der Beiträge.
+**Soll:** Die interaktive Filterzeile (Alle / Diagnose / Einordnung / System) **entfernen** — bei wenigen Beiträgen täuscht sie eine Bibliothek vor („kein Rauschen"). Wieder einführen erst ab Umfang, der nicht mehr überfliegbar ist (Daumenwert ~12–15 Beiträge). Bis dahin chronologisch. Die drei Kategorien **bleiben** als **Labels** am Beitrag: Magenta-Mono-Text (wie CHG-01), keine Pillen, keine Verläufe.
+**Prüfkriterium:** keine Filter-Schaltflächen auf dem Index; Kategorie erscheint nur als Mono-Magenta-Label je Beitrag.
+
+### CHG-13 — Artikel-Body = Serife (greift R8 auf der Lese-Seite) · ✅ umgesetzt
+**Wo:** Detail-/Artikel-Template eines Denken-Beitrags.
+**Soll:** der laufende Essay-Body = Serife (lange Lesestrecke, Denkraum-Stimme); Zwischenüberschriften = Grotesk; Standfirst/Zusammenfassung = Grotesk/Sans; Meta/Marker = Mono; hervorgehobene Aussagen/Zitate nach CHG-09. Magenta nur als Signal (Links, aktiver Zustand), nie als Fläche. Kontextueller Abschluss-CTA = gefüllter Button mit artikelspezifischem Titel.
+**Prüfkriterium:** Fließtext des Artikels ist Serife; Struktur-/Meta-Elemente Grotesk bzw. Mono. **Status: umgesetzt (Detailseite steht).**
+
+### CHG-14 — Fixed-Header-Offset (funktional, seitenübergreifend)
+**Wo:** alle Seiten mit fixierter Nav (Nav ist dauerhaft oben am Bildschirm).
+**Soll:** Nav erhält einen **deckenden Hintergrund** (`--bg` der jeweiligen Wirkung), damit darunterlaufender Inhalt nicht durchscheint. Inhalt bekommt `scroll-padding-top` in Nav-Höhe (plus kleiner Puffer), damit angesprungene Anker/Überschriften und das Standfirst **nicht** hinter der Nav verschwinden.
+**Prüfkriterium:** kein Text wird beim Scrollen/Ankern von der Nav verdeckt; Standfirst vollständig sichtbar (Regressionsfall: langes Standfirst monolithisch).
+
+### CHG-15 — Long-Form-Typografie (Artikel-Body) · ✅ umgesetzt
+**Wo:** Artikel-Template (Serif-Body), gilt für alle künftigen Beiträge.
+**Soll:** Absatzabstand zwischen `` ~`1em`; Zeilenhöhe Serif-Body ~`1.6–1.7`; Lead-Absatz nur leicht größer als Body (Hierarchie, kein Größensprung mitten im Text), im monolithischen zusätzlich gedämpft. Eigenständige Gedanken stehen als getrennte Absätze, nicht als Block.
+**Prüfkriterium:** sichtbarer Abstand zwischen Absätzen; Body atmet; Lead→Body liest sich als Hierarchie. **Status: umgesetzt (Stand „Führung durch Reduktion").**
+
+---
+
+## 4. Bewusst NICHT geändert
+
+- **Inhalte/Copy** bleiben unverändert (Schritt 2).
+- **Wirkung-Schalter** bleibt; er ist die Demonstration „Form beweglich, Inhalt fix".
+- **Magenta als Markenfarbe** ist gesetzt (bewusste Entscheidung); Dok. 19 ist hier ausgeklammert.
+- **Bildmotive** (Monolith o. a.) folgen im letzten Schritt, je Variante.
+
+## 5. Weiterer Punkt
+
+
+- **WP-1:** Wortmarke schreibweise „MARKE MACHT"
\ No newline at end of file
diff --git a/_markemacht.de/assets/components/footer.html b/_markemacht.de/assets/components/footer.html
new file mode 100644
index 0000000..3598035
--- /dev/null
+++ b/_markemacht.de/assets/components/footer.html
@@ -0,0 +1,13 @@
+
diff --git a/_markemacht.de/assets/components/header.html b/_markemacht.de/assets/components/header.html
new file mode 100644
index 0000000..a5987bf
--- /dev/null
+++ b/_markemacht.de/assets/components/header.html
@@ -0,0 +1,51 @@
+Zum Inhalt springen
+
+
+
+
diff --git a/_markemacht.de/assets/css/app.css b/_markemacht.de/assets/css/app.css
index b17a03a..7567f5a 100644
--- a/_markemacht.de/assets/css/app.css
+++ b/_markemacht.de/assets/css/app.css
@@ -9,21 +9,23 @@
:root,
[data-theme="monolith"] {
- --color-bg-base: 10 10 10; /* #0A0A0A */
- --color-bg-surface: 20 19 19; /* #141313 */
- --color-bg-elevated: 54 54 54; /* #363636 */
- --color-bg-accent-soft: 71 71 71; /* #474747 */
- --color-border: 53 52 52; /* #353434 */
- --color-text-primary: 255 255 255; /* #FFFFFF */
- --color-text-body: 229 226 225; /* #E5E2E1 */
- --color-text-dim: 168 167 167; /* #A8A7A7 */
- --color-text-mute: 95 94 94; /* #5F5E5E */
- --color-accent: 232 23 93; /* #E8175D */
+ --color-bg-base: 11 11 12; /* #0B0B0C Grundfläche (--bg) */
+ --color-bg-surface: 18 18 20; /* #121214 Karten/Container (--surface) */
+ --color-bg-elevated: 18 18 20; /* #121214 Karten (--surface) */
+ --color-bg-accent-soft: 38 38 43; /* #26262B Hover-Ton (= --line) */
+ --color-border: 38 38 43; /* #26262B Trennlinien/Rahmen (--line) */
+ --color-text-primary: 244 242 238; /* #F4F2EE Haupttext (--ink) */
+ --color-text-body: 230 228 224; /* #E6E4E0 */
+ --color-text-dim: 140 140 146; /* #8C8C92 Sekundärtext (--muted) */
+ --color-text-mute: 108 108 114; /* #6C6C72 */
+ --color-accent: 232 23 93; /* #E8175D Signal (--signal, unverändert) */
--color-accent-soft: 204 82 122; /* #CC527A */
- --radius-card: 0px;
- --radius-pill: 0px;
- --radius-btn: 0px;
+ /* Radius ist Wirkungs-Token (CHG-06): monolithisch durchgehend eckig. */
+ --radius: 0px;
+ --radius-card: var(--radius);
+ --radius-pill: var(--radius);
+ --radius-btn: var(--radius);
--ff-display: "Outfit", system-ui, sans-serif;
--ff-editorial: "Newsreader", Georgia, serif;
@@ -32,7 +34,8 @@
--fs-hero: clamp(52px, 8vw, 96px);
--fs-section: clamp(36px, 5vw, 56px);
- --fs-editorial: clamp(22px, 2.6vw, 36px);
+ --fs-editorial: clamp(20px, 2.2vw, 30px);
+
--fs-body: 18px;
--fs-meta: 13px;
@@ -48,7 +51,7 @@
--container-max: 1440px;
--px-horizontal: clamp(24px, 8vw, 128px);
- --section-gap: clamp(96px, 14vw, 160px);
+ --section-gap: clamp(64px, 8vw, 96px);
--block-gap: clamp(48px, 8vw, 96px);
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -57,21 +60,24 @@
}
[data-theme="editorial"] {
- --color-bg-base: 251 250 242; /* #FBFAF2 */
- --color-bg-surface: 245 244 236; /* #F5F4EC */
- --color-bg-elevated: 255 255 255; /* #FFFFFF */
+ --color-bg-base: 251 250 242; /* #FBFAF2 Grundfläche (Creme) */
+ --color-bg-surface: 245 244 236; /* #F5F4EC Platzhalter-/Slot-Ton */
+ --color-bg-elevated: 255 255 255; /* #FFFFFF Karten (--surface) */
--color-bg-accent-soft: 233 232 225; /* #E9E8E1 */
- --color-border: 230 225 211; /* #E6E1D3 */
- --color-text-primary: 25 25 25; /* #191919 */
+ --color-border: 231 228 221; /* #E7E4DD Trennlinien/Rahmen (--line) */
+ --color-text-primary: 25 25 25; /* #191919 Haupttext (--ink) */
--color-text-body: 27 28 23; /* #1B1C17 */
--color-text-dim: 68 71 72; /* #444748 */
- --color-text-mute: 116 120 120; /* #747878 */
- --color-accent: 232 23 93; /* #E8175D */
+ --color-text-mute: 116 120 120; /* #747878 Sekundärtext (--muted) */
+ --color-accent: 232 23 93; /* #E8175D Signal (--signal, unverändert) */
--color-accent-soft: 184 0 70; /* #B80046 */
- --radius-card: 16px;
- --radius-pill: 9999px;
- --radius-btn: 8px;
+ /* Radius ist Wirkungs-Token (CHG-06): editorial durchgehend gleich leicht
+ gerundet. Ein Wert auf alle Elemente — kein gemischter Radius. */
+ --radius: 8px;
+ --radius-card: var(--radius);
+ --radius-pill: var(--radius);
+ --radius-btn: var(--radius);
--ff-display: "Plus Jakarta Sans", system-ui, sans-serif;
--ff-editorial: "Noto Serif", Georgia, serif;
@@ -96,14 +102,18 @@
--container-max: 1280px;
--px-horizontal: clamp(24px, 5vw, 64px);
- --section-gap: clamp(80px, 10vw, 128px);
+ --section-gap: clamp(64px, 8vw, 96px);
--block-gap: clamp(40px, 6vw, 80px);
}
/* --- Global Reset & Base --------------------------------------------------- */
* { box-sizing: border-box; }
-html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
+html {
+ scroll-behavior: smooth;
+ scroll-padding-top: 96px;
+ -webkit-text-size-adjust: 100%;
+}
body {
margin: 0;
background: rgb(var(--color-bg-base));
@@ -139,6 +149,34 @@ img, svg { max-width: 100%; display: block; }
/* --- A11y: Fokus-States --------------------------------------------------- */
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
+ white-space: nowrap;
+ border: 0;
+}
+.visually-hidden:focus,
+.visually-hidden:focus-visible {
+ position: fixed;
+ top: 16px;
+ left: 16px;
+ z-index: 100;
+ width: auto;
+ height: auto;
+ padding: 10px 14px;
+ margin: 0;
+ clip: auto;
+ background: rgb(var(--color-bg-base));
+ color: rgb(var(--color-text-primary));
+ border: 1px solid rgb(var(--color-border));
+ white-space: normal;
+}
+
:focus { outline: none; }
:focus-visible {
outline: 2px solid rgb(var(--color-accent));
@@ -147,7 +185,7 @@ img, svg { max-width: 100%; display: block; }
}
[data-theme="editorial"] :focus-visible {
outline-offset: 4px;
- border-radius: 4px;
+ border-radius: 2px;
}
.material-symbols-outlined {
@@ -202,6 +240,23 @@ img, svg { max-width: 100%; display: block; }
margin: 0;
}
+/* Serif-Kommentar (Denk-Stimme): eingerückt, mit 2px-Magenta-Strich als Signal,
+ das den Absatz als Kommentar/Annotation kenntlich macht (Magenta = Linie ≤2px). */
+.comment {
+ padding-left: clamp(20px, 2.5vw, 32px);
+ border-left: 2px solid rgb(var(--color-accent));
+}
+
+/* Sans-Lead (gebaute Stimme) — Intro/Punchline ohne Serife (CHG-05). */
+.lead {
+ font-family: var(--ff-body);
+ font-size: var(--fs-editorial);
+ line-height: 1.45;
+ font-weight: 400;
+ color: rgb(var(--color-text-body));
+ margin: 0;
+ }
+
.meta {
font-family: var(--ff-mono);
font-size: var(--fs-meta);
@@ -232,6 +287,7 @@ img, svg { max-width: 100%; display: block; }
.section {
padding-block: var(--section-gap);
+ border-top: 1px solid rgb(var(--color-border));
}
.section-tight {
@@ -355,7 +411,7 @@ img, svg { max-width: 100%; display: block; }
text-transform: none;
font-weight: 500;
}
-.nav-link:hover { color: rgb(var(--color-accent)); }
+.nav-link:hover { color: rgb(var(--color-text-primary)); }
.nav-link.is-active {
color: rgb(var(--color-accent));
font-weight: 700;
@@ -374,22 +430,21 @@ img, svg { max-width: 100%; display: block; }
color: rgb(var(--color-accent));
transition: color var(--transition-fast);
white-space: nowrap;
+ background: rgb(var(--color-text-primary));
+ color: rgb(var(--color-accent));
+ padding: 10px 16px;
+
}
[data-theme="editorial"] .nav-cta {
background: rgb(var(--color-text-primary));
color: rgb(var(--color-bg-base));
padding: 10px 16px;
border-radius: var(--radius-btn);
- font-family: var(--ff-body);
- font-size: 14px;
- letter-spacing: -0.01em;
- text-transform: none;
- font-weight: 500;
}
-.nav-cta:hover { color: rgb(var(--color-text-primary)); }
+.nav-cta:hover { color: rgb(var(--color-bg-base)); background: rgb(var(--color-accent)); }
[data-theme="editorial"] .nav-cta:hover {
background: rgb(var(--color-accent));
- color: #fff;
+ color: rgb(var(--color-text-primary));
}
/* Desktop zeigt CTA ab 1100px */
@@ -517,6 +572,12 @@ img, svg { max-width: 100%; display: block; }
border-top: 1px solid rgb(var(--color-border));
}
.mobile-drawer .wirkung-switch { display: inline-flex; align-self: flex-start; }
+.mobile-drawer-cta {
+ display: inline-flex !important;
+ align-items: center;
+ align-self: flex-start;
+ width: fit-content;
+}
body.drawer-open { overflow: hidden; }
@@ -543,53 +604,28 @@ body.drawer-open { overflow: hidden; }
.hero-keyvisual { display: block; }
}
+/* Hero-Bild-Slot (CHG-08): randständig, angeschnitten, harte Kante,
+ flacher Flächenton als Platzhalter — kein Verlauf, kein Glow. */
.monolith {
position: absolute;
- right: -10%;
+ right: -6%;
top: 50%;
transform: translateY(-50%);
width: 70%;
aspect-ratio: 3/4;
- background:
- linear-gradient(125deg, rgb(var(--color-bg-base)) 0%, rgb(var(--color-bg-base)) 35%, transparent 60%),
- linear-gradient(135deg, #1f1e1e 0%, #2a2929 40%, #0e0d0d 100%);
- box-shadow:
- inset 2px 0 0 rgb(var(--color-accent) / 0.35),
- inset -40px 0 120px rgb(var(--color-bg-base));
- filter: contrast(1.1);
-}
-[data-theme="editorial"] .monolith {
- background:
- linear-gradient(125deg, rgb(var(--color-bg-base)) 0%, rgb(var(--color-bg-base)) 30%, transparent 60%),
- linear-gradient(150deg, #e9e6d8 0%, #d6d1c1 50%, #bfb9a8 100%);
- box-shadow:
- inset 0 0 0 1px rgb(var(--color-border)),
- inset -40px 0 80px rgb(var(--color-bg-base) / 0.6);
- border-top-left-radius: 96px;
- border-bottom-left-radius: 16px;
- filter: none;
+ background: rgb(var(--color-bg-surface));
+ border: 1px solid rgb(var(--color-border));
+ border-radius: var(--radius);
}
-/* Alternative Keyvisual-Varianten für Unterseiten */
+/* Alternative Keyvisual-Slots für Unterseiten — ebenfalls flach */
.monolith--edge {
right: -20%;
width: 60%;
aspect-ratio: 4/5;
- background:
- linear-gradient(95deg, rgb(var(--color-bg-base)) 0%, transparent 40%),
- linear-gradient(115deg, #252424 0%, #0a0a0a 70%);
- box-shadow:
- inset 3px 0 0 rgb(var(--color-accent) / 0.45),
- inset -80px 0 140px rgb(var(--color-bg-base));
-}
-[data-theme="editorial"] .monolith--edge {
- background:
- linear-gradient(95deg, rgb(var(--color-bg-base)) 0%, transparent 40%),
- linear-gradient(135deg, #efece0 0%, #d9d3c1 60%, #c1baa6 100%);
- box-shadow:
- inset 0 0 0 1px rgb(var(--color-border)),
- inset -60px 0 100px rgb(var(--color-bg-base) / 0.7);
- border-radius: 64px 0 0 0;
+ background: rgb(var(--color-bg-surface));
+ border: 1px solid rgb(var(--color-border));
+ border-radius: var(--radius);
}
.monolith--texture {
@@ -597,75 +633,52 @@ body.drawer-open { overflow: hidden; }
top: 40%;
width: 55%;
aspect-ratio: 1/1;
- background:
- repeating-linear-gradient(135deg, #161515 0px, #161515 2px, #1e1d1d 2px, #1e1d1d 4px),
- #141313;
- mask-image: linear-gradient(135deg, transparent 0%, black 40%, black 70%, transparent 100%);
- -webkit-mask-image: linear-gradient(135deg, transparent 0%, black 40%, black 70%, transparent 100%);
- opacity: 0.6;
-}
-[data-theme="editorial"] .monolith--texture {
- background:
- repeating-linear-gradient(135deg, #eae6d9 0px, #eae6d9 2px, #e0dbca 2px, #e0dbca 4px),
- #efeee6;
- opacity: 0.9;
- border-radius: 24px;
- box-shadow: inset 0 0 0 1px rgb(var(--color-border));
- mask-image: none;
- -webkit-mask-image: none;
+ background: rgb(var(--color-bg-surface));
+ border: 1px solid rgb(var(--color-border));
+ border-radius: var(--radius);
}
/* --- Buttons / Links ------------------------------------------------------- */
+/* Primärbutton ist invertiert zur Grundfläche und kippt über Tokens je Wirkung:
+ monolithisch = heller Button auf Dunkel, editorial = dunkler Button auf Hell.
+ 1px-Rahmen in Flächenfarbe, damit solid + ghost exakt gleich hoch sind. */
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
- padding: 18px 28px;
+ padding: 14px 22px;
font-family: var(--ff-mono);
font-size: var(--fs-meta);
letter-spacing: var(--ls-meta);
text-transform: uppercase;
- color: rgb(var(--color-text-primary));
- background: rgb(var(--color-bg-elevated));
- border: 0;
+ color: rgb(var(--color-bg-base));
+ background: rgb(var(--color-text-primary));
+ border: 1px solid rgb(var(--color-text-primary));
border-radius: var(--radius-btn);
cursor: pointer;
- transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
+ transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
+/* Hover deutlich spürbar: monolithisch weiß -> gräulich, editorial dunkel -> heller. */
.btn:hover {
- background: rgb(var(--color-accent));
- color: #fff;
-}
-[data-theme="editorial"] .btn {
- background: rgb(var(--color-text-primary));
+ background: rgb(var(--color-text-dim));
+ border-color: rgb(var(--color-text-dim));
color: rgb(var(--color-bg-base));
- font-family: var(--ff-body);
- font-size: 15px;
- letter-spacing: -0.01em;
- text-transform: none;
- font-weight: 500;
- padding: 14px 22px;
}
-[data-theme="editorial"] .btn:active { transform: translateY(1px); }
+[data-theme="editorial"] .btn:hover {
+ background: rgb(var(--color-text-mute));
+ border-color: rgb(var(--color-text-mute));
+ color: rgb(var(--color-bg-base));
+}
+.btn:active { transform: translateY(1px); }
.btn-ghost {
- background: transparent;
- border: 1px solid rgb(var(--color-border));
- color: rgb(var(--color-text-primary));
-}
-.btn-ghost:hover {
- background: transparent;
- border-color: rgb(var(--color-accent));
- color: rgb(var(--color-accent));
-}
-[data-theme="editorial"] .btn-ghost {
background: transparent;
color: rgb(var(--color-text-primary));
border: 1px solid rgb(var(--color-text-primary));
}
-[data-theme="editorial"] .btn-ghost:hover {
- background: rgb(var(--color-bg-surface));
+.btn-ghost:hover {
+ background: rgb(var(--color-bg-accent-soft));
color: rgb(var(--color-text-primary));
border-color: rgb(var(--color-text-primary));
}
@@ -695,15 +708,10 @@ body.drawer-open { overflow: hidden; }
cursor: pointer;
}
.link-arrow:hover {
- color: rgb(var(--color-accent));
- border-color: rgb(var(--color-accent));
+ color: rgb(var(--color-text-primary));
+ border-color: rgb(var(--color-text-primary));
}
[data-theme="editorial"] .link-arrow {
- font-family: var(--ff-body);
- text-transform: none;
- letter-spacing: -0.01em;
- font-size: 15px;
- font-weight: 500;
border-bottom-color: rgb(var(--color-text-primary));
}
@@ -722,29 +730,22 @@ body.drawer-open { overflow: hidden; }
.card {
background: rgb(var(--color-bg-elevated));
padding: clamp(24px, 3vw, 48px);
- border-radius: var(--radius-card);
- transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-medium);
+ border: 1px solid rgb(var(--color-border));
+ border-radius: var(--radius);
+ transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.card:hover {
background: rgb(var(--color-bg-accent-soft));
-}
-[data-theme="editorial"] .card {
- background: rgb(var(--color-bg-elevated));
- border: 1px solid rgb(var(--color-border));
- box-shadow: 0 4px 20px rgb(0 0 0 / 0.04);
+ border-color: rgb(var(--color-text-mute));
}
[data-theme="editorial"] .card:hover {
- transform: translateY(-2px);
- box-shadow: 0 12px 32px rgb(0 0 0 / 0.08);
background: rgb(var(--color-bg-elevated));
+ border-color: rgb(var(--color-text-mute));
}
+/* CHG-04: diagnostische Kante ausschließlich an der zugespitzten Karte (03) */
.card-accent-border {
- border-left: 4px solid rgb(var(--color-accent));
-}
-[data-theme="editorial"] .card-accent-border {
- border-left: 0;
- border-top: 4px solid rgb(var(--color-accent));
+ border-top: 2px solid rgb(var(--color-accent));
}
/* --- Quote block ----------------------------------------------------------- */
@@ -753,6 +754,7 @@ body.drawer-open { overflow: hidden; }
padding-block: var(--section-gap);
text-align: center;
background: rgb(var(--color-bg-base));
+ border-top: 1px solid rgb(var(--color-border));
}
[data-theme="editorial"] .quote-block {
background: rgb(var(--color-bg-surface));
@@ -772,8 +774,8 @@ body.drawer-open { overflow: hidden; }
font-family: var(--ff-editorial);
font-size: clamp(80px, 12vw, 160px);
line-height: 0.7;
- color: rgb(var(--color-accent));
- opacity: 0.35;
+ color: rgb(var(--color-text-mute));
+ opacity: 0.4;
margin-bottom: 12px;
user-select: none;
}
@@ -811,30 +813,62 @@ body.drawer-open { overflow: hidden; }
[data-theme="editorial"] .only-mono { display: none; }
[data-theme="editorial"] .only-editorial { display: block; }
-/* Homepage: Monolithische Symptom-Liste (asymmetrisch) */
-.symptoms-mono { display: block; }
-.symptoms-editorial { display: none; }
-[data-theme="editorial"] .symptoms-mono { display: none; }
-[data-theme="editorial"] .symptoms-editorial { display: grid; }
-
-.symptoms-editorial {
- grid-template-columns: repeat(1, minmax(0, 1fr));
- gap: 24px;
- margin-top: 48px;
-}
-@media (min-width: 720px) {
- .symptoms-editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-@media (min-width: 1080px) {
- .symptoms-editorial { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-}
-
-.sym-row {
+/* CHG-03: Invariant über beide Wirkungen ist der Inhalt — Reihenfolge 01 → 02 → 03,
+ gleiche Gewichtung (gleiche Kartenbreite), Magenta-Kante auf Karte 03.
+ Die Anordnung ist Ausdruck und variiert bewusst je Wirkung (R6, Dok. 010):
+ monolithisch = rasterbasierter Versatz, editorial = geordnete Reihe.
+ Gleiches DOM, nur Grid-Platzierung unterscheidet sich. */
+.symptoms {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
- gap: 24px;
- margin-bottom: clamp(48px, 8vw, 96px);
- align-items: start;
+ column-gap: 24px;
+ row-gap: 24px;
+ margin-top: 48px;
+}
+.symptoms .card { grid-column: 1 / -1; }
+
+@media (min-width: 720px) {
+ /* Editorial: geordnete 3er-Reihe, gleiche Breite (je 4 Spalten) */
+ [data-theme="editorial"] .symptoms .card { grid-column: span 4; }
+
+ /* Monolithisch: gleiche Kartenbreite (je 8 Spalten), konsequenter Versatz-
+ Schritt von +2 Spalten, an der linken Baseline verankert — konstruiert,
+ nicht zufällig. Karten stapeln durch den Spalten-Konflikt automatisch. */
+ [data-theme="monolith"] .symptoms { row-gap: clamp(32px, 5vw, 64px); }
+ [data-theme="monolith"] .symptoms .card:nth-child(1) { grid-column: 1 / span 8; }
+ [data-theme="monolith"] .symptoms .card:nth-child(2) { grid-column: 3 / span 8; }
+ [data-theme="monolith"] .symptoms .card:nth-child(3) { grid-column: 5 / span 8; }
+}
+
+/* Manifest [02]: gleiche Logik wie Startseite [01] Diagnose, auf 4 Karten
+ übertragen. Invariant = Inhalt/Reihenfolge 01→04 + Magenta-Kante auf der
+ letzten Karte. Anordnung variiert je Wirkung (R6). */
+.manifest-cards {
+ display: grid;
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ column-gap: 24px;
+ row-gap: 24px;
+}
+.manifest-cards .card { grid-column: 1 / -1; }
+
+@media (min-width: 720px) {
+ /* Editorial: geordnetes 2x2-Raster, gleiche Breite (je 6 Spalten) */
+ [data-theme="editorial"] .manifest-cards .card { grid-column: span 6; }
+
+ /* Monolithisch: rasterbasierte Treppe — gleicher Versatz-Schritt (+2 Spalten)
+ wie auf der Startseite, an der linken Baseline verankert, letzte Karte an
+ der rechten Kante. Schmaler (je 6 Spalten), damit alle 4 Stufen passen. */
+ [data-theme="monolith"] .manifest-cards { row-gap: clamp(32px, 5vw, 64px); }
+ [data-theme="monolith"] .manifest-cards .card:nth-child(1) { grid-column: 1 / span 6; }
+ [data-theme="monolith"] .manifest-cards .card:nth-child(2) { grid-column: 3 / span 6; }
+ [data-theme="monolith"] .manifest-cards .card:nth-child(3) { grid-column: 5 / span 6; }
+ [data-theme="monolith"] .manifest-cards .card:nth-child(4) { grid-column: 7 / span 6; }
+}
+
+.signal-quote {
+ margin: 0;
+ max-width: 36ch;
+ color: rgb(var(--color-text-primary));
}
/* DNA list (Methode) */
@@ -846,84 +880,41 @@ body.drawer-open { overflow: hidden; }
margin-bottom: 16px;
}
-/* Blog: monolith = Langform-Liste, editorial = Karten-Raster */
+/* Blog: monolith = Langform-Liste, editorial = volle Breite als Karten.
+ Kein Bildmaterial → keine Featured-/Raster-Logik; editorial spiegelt den
+ monolithischen Zeilen-Aufbau, bleibt aber in Karten. */
.blog-list-mono { display: flex; flex-direction: column; gap: clamp(48px, 8vw, 96px); }
.blog-list-editorial { display: none; }
[data-theme="editorial"] .blog-list-mono { display: none; }
[data-theme="editorial"] .blog-list-editorial {
- display: grid;
- grid-template-columns: repeat(1, minmax(0, 1fr));
+ display: flex;
+ flex-direction: column;
gap: 24px;
}
-@media (min-width: 900px) {
- [data-theme="editorial"] .blog-list-editorial {
- grid-template-columns: repeat(6, minmax(0, 1fr));
- }
-}
.post-card {
padding: 32px;
background: rgb(var(--color-bg-elevated));
border: 1px solid rgb(var(--color-border));
- border-radius: var(--radius-card);
- transition: box-shadow var(--transition-medium), transform var(--transition-fast);
+ border-radius: var(--radius);
+ transition: border-color var(--transition-fast);
cursor: pointer;
display: flex;
flex-direction: column;
}
.post-card:hover {
- box-shadow: 0 12px 32px rgb(0 0 0 / 0.06);
- transform: translateY(-2px);
+ border-color: rgb(var(--color-text-mute));
}
-/* Featured-Post (editorial) */
-.post-featured {
- grid-column: 1 / -1;
+/* Volle-Breite-Karte (editorial): gleicher Spalten-Aufbau wie .post-row */
+.post-card--row {
display: grid;
- grid-template-columns: 1fr;
- gap: 0;
- padding: 0;
- overflow: hidden;
-}
-@media (min-width: 900px) {
- .post-featured {
- grid-template-columns: 1fr 1fr;
- min-height: 360px;
- }
-}
-.post-featured-visual {
- background:
- linear-gradient(135deg, #e9e6d8 0%, #d6d1c1 50%, #bfb9a8 100%);
- min-height: 240px;
- position: relative;
- overflow: hidden;
-}
-.post-featured-visual::before {
- content: "";
- position: absolute;
- inset: 0;
- background:
- radial-gradient(circle at 30% 30%, rgb(232 23 93 / 0.15) 0%, transparent 50%),
- repeating-linear-gradient(45deg, transparent 0 24px, rgb(0 0 0 / 0.04) 24px 25px);
-}
-.post-featured-body {
- padding: 32px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- gap: 16px;
- border-left: 1px solid rgb(var(--color-border));
-}
-@media (max-width: 899px) {
- .post-featured-body { border-left: 0; border-top: 1px solid rgb(var(--color-border)); }
-}
-
-.post-small {
- grid-column: span 6;
-}
-@media (min-width: 900px) {
- .post-small { grid-column: span 3; }
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ gap: 24px;
+ align-items: start;
+ padding: clamp(24px, 3vw, 48px);
}
+.post-card--row:hover .post-row-title { color: rgb(var(--color-text-primary)); }
/* Bloglisten-Unterscheidung: Monolith = sehr lesbare Zeile */
.post-row {
@@ -936,12 +927,76 @@ body.drawer-open { overflow: hidden; }
cursor: pointer;
transition: border-color var(--transition-fast);
}
-.post-row:hover { border-color: rgb(var(--color-accent)); }
-.post-row:hover .post-row-title { color: rgb(var(--color-accent)); }
+.post-row:hover { border-color: rgb(var(--color-text-mute)); }
+.post-row:hover .post-row-title { color: rgb(var(--color-text-primary)); }
.post-row-title {
transition: color var(--transition-fast);
}
+/* Ganze Beitrags-Kachel klickbar (Stretched-Link), barrierearm:
+ Linktext bleibt der Titel, ::after deckt die Karte/Zeile ab. */
+.post-row,
+.post-card--row { position: relative; }
+.post-title-link {
+ color: inherit;
+ text-decoration: none;
+}
+.post-title-link::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+}
+
+/* --- Essay / Beitrags-Detail (Denken) ------------------------------------
+ Schrift-Regel: auf Denken ist der Essay-Body die denkende Stimme = Serife. */
+.article-head {
+ padding-top: clamp(40px, 8vw, 96px);
+ padding-bottom: clamp(32px, 6vw, 64px);
+}
+.article-meta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px 20px;
+ align-items: center;
+}
+
+.prose { max-width: 680px; }
+/* Flow-Abstand zentral steuern: erst alle Margins resetten, dann Geschwister
+ trennen. Reihenfolge/Spezifität so, dass der Abstand zuverlässig greift. */
+.prose > * { margin: 0; }
+.prose > * + * { margin-top: 1.9em; }
+.prose p {
+ font-family: var(--ff-editorial);
+ font-size: clamp(18px, 1.3vw, 20px);
+ line-height: 1.8;
+ color: rgb(var(--color-text-body));
+}
+.prose .prose-lead {
+ font-size: clamp(20px, 1.7vw, 24px);
+ line-height: 1.6;
+ color: rgb(var(--color-text-primary));
+}
+.prose h2 {
+ font-family: var(--ff-display);
+ font-weight: var(--fw-display);
+ font-size: clamp(22px, 2.4vw, 30px);
+ line-height: 1.2;
+ letter-spacing: -0.01em;
+ color: rgb(var(--color-text-primary));
+ margin-top: 2.4em;
+}
+/* Pull-Quote = erhobene Aussage: Serife + 2px-Magenta-Signal-Linie. */
+.prose blockquote {
+ margin-top: 2.2em;
+ padding-left: clamp(20px, 2.5vw, 32px);
+ border-left: 2px solid rgb(var(--color-accent));
+ font-family: var(--ff-editorial);
+ font-size: clamp(22px, 2vw, 28px);
+ line-height: 1.4;
+ color: rgb(var(--color-text-primary));
+}
+.prose strong { font-weight: 600; color: rgb(var(--color-text-primary)); }
+
/* Footer ------------------------------------------------------------------- */
.site-footer {
@@ -990,7 +1045,7 @@ body.drawer-open { overflow: hidden; }
letter-spacing: -0.005em;
font-size: 13px;
}
-.footer-link:hover { color: rgb(var(--color-accent)); }
+.footer-link:hover { color: rgb(var(--color-text-primary)); }
.footer-note { opacity: 0.8; }
/* --- Utilities ------------------------------------------------------------- */
@@ -1017,69 +1072,19 @@ body.drawer-open { overflow: hidden; }
.max-prose { max-width: 680px; }
.max-wide { max-width: 900px; }
+/* CHG-01: Label als reiner Mono-Signal-Text, keine gefüllte Fläche */
.tag {
display: inline-block;
font-family: var(--ff-mono);
font-size: 12px;
- letter-spacing: 0.06em;
+ letter-spacing: 0.16em;
text-transform: uppercase;
- padding: 6px 12px;
- border: 1px solid rgb(var(--color-border));
- color: rgb(var(--color-text-dim));
- border-radius: var(--radius-pill);
-}
-[data-theme="editorial"] .tag {
- background: rgb(var(--color-accent) / 0.08);
+ font-weight: 500;
color: rgb(var(--color-accent));
- border-color: transparent;
- font-family: var(--ff-mono);
- letter-spacing: 0.05em;
-}
-
-/* Filter pills (Denken) */
-.filter-row {
- display: flex;
- flex-wrap: wrap;
- gap: 16px;
- list-style: none;
- padding: 0 0 16px;
- margin: 0;
- border-bottom: 1px solid rgb(var(--color-border));
-}
-[data-theme="editorial"] .filter-row {
- gap: 8px;
- border-bottom: 0;
- padding-bottom: 0;
-}
-.filter-btn {
- background: transparent;
- border: 0;
- cursor: pointer;
padding: 0;
- font-family: var(--ff-mono);
- font-size: var(--fs-meta);
- letter-spacing: var(--ls-meta);
- text-transform: uppercase;
- color: rgb(var(--color-text-dim));
- font-weight: 500;
- transition: color var(--transition-fast);
-}
-.filter-btn:hover { color: rgb(var(--color-text-primary)); }
-.filter-btn.is-active { color: rgb(var(--color-accent)); font-weight: 700; }
-[data-theme="editorial"] .filter-btn {
- padding: 8px 16px;
- border: 1px solid rgb(var(--color-border));
- border-radius: var(--radius-pill);
- text-transform: none;
- letter-spacing: -0.005em;
- font-family: var(--ff-body);
- font-size: 13px;
- font-weight: 500;
-}
-[data-theme="editorial"] .filter-btn.is-active {
- background: rgb(var(--color-text-primary));
- color: rgb(var(--color-bg-base));
- border-color: rgb(var(--color-text-primary));
+ border: 0;
+ background: transparent;
+ border-radius: 0;
}
/* Editorial Split (Methode: Theorie → Praxis) */
@@ -1097,29 +1102,11 @@ body.drawer-open { overflow: hidden; }
}
.split-visual {
aspect-ratio: 4/3;
- background:
- radial-gradient(ellipse at 30% 30%, rgb(0 0 0 / 0.08) 0%, transparent 60%),
- linear-gradient(135deg, #efece0 0%, #d9d3c1 60%, #c1baa6 100%);
- border-radius: var(--radius-card);
+ background: rgb(var(--color-bg-surface));
+ border: 1px solid rgb(var(--color-border));
+ border-radius: var(--radius);
position: relative;
overflow: hidden;
- box-shadow: inset 0 0 0 1px rgb(var(--color-border));
-}
-.split-visual::after {
- content: "";
- position: absolute;
- inset: 0;
- background: repeating-linear-gradient(135deg, transparent 0 32px, rgb(0 0 0 / 0.03) 32px 33px);
-}
-[data-theme="monolith"] .split-visual {
- background:
- radial-gradient(ellipse at 30% 30%, rgb(232 23 93 / 0.15) 0%, transparent 60%),
- linear-gradient(135deg, #1c1b1b 0%, #0e0d0d 100%);
- box-shadow: inset 3px 0 0 rgb(var(--color-accent) / 0.4);
- border-radius: 0;
-}
-[data-theme="monolith"] .split-visual::after {
- background: repeating-linear-gradient(135deg, transparent 0 32px, rgb(255 255 255 / 0.04) 32px 33px);
}
/* --- Scroll-Reveal -------------------------------------------------------- */
diff --git a/_markemacht.de/assets/fonts/newsreader/font.css b/_markemacht.de/assets/fonts/newsreader/font.css
new file mode 100644
index 0000000..a8314f2
--- /dev/null
+++ b/_markemacht.de/assets/fonts/newsreader/font.css
@@ -0,0 +1,112 @@
+/* newsreader-200 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: normal;
+ font-weight: 200;
+ src: url('../fonts/newsreader-v26-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-200italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: italic;
+ font-weight: 200;
+ src: url('../fonts/newsreader-v26-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-300 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: normal;
+ font-weight: 300;
+ src: url('../fonts/newsreader-v26-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-300italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: italic;
+ font-weight: 300;
+ src: url('../fonts/newsreader-v26-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-regular - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/newsreader-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: italic;
+ font-weight: 400;
+ src: url('../fonts/newsreader-v26-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-500 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: normal;
+ font-weight: 500;
+ src: url('../fonts/newsreader-v26-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-500italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: italic;
+ font-weight: 500;
+ src: url('../fonts/newsreader-v26-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-600 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: normal;
+ font-weight: 600;
+ src: url('../fonts/newsreader-v26-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-600italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: italic;
+ font-weight: 600;
+ src: url('../fonts/newsreader-v26-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-700 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: normal;
+ font-weight: 700;
+ src: url('../fonts/newsreader-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-700italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: italic;
+ font-weight: 700;
+ src: url('../fonts/newsreader-v26-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-800 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: normal;
+ font-weight: 800;
+ src: url('../fonts/newsreader-v26-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* newsreader-800italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Newsreader';
+ font-style: italic;
+ font-weight: 800;
+ src: url('../fonts/newsreader-v26-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
\ No newline at end of file
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-200.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-200.woff2
new file mode 100644
index 0000000..ff15e63
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-200.woff2 differ
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-200italic.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-200italic.woff2
new file mode 100644
index 0000000..d0a091e
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-200italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-300.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-300.woff2
new file mode 100644
index 0000000..f9c084e
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-300.woff2 differ
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-300italic.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-300italic.woff2
new file mode 100644
index 0000000..3342cda
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-300italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-500.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-500.woff2
new file mode 100644
index 0000000..a84e016
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-500.woff2 differ
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-500italic.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-500italic.woff2
new file mode 100644
index 0000000..52588d4
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-500italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-600.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-600.woff2
new file mode 100644
index 0000000..d72ee9c
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-600.woff2 differ
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-600italic.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-600italic.woff2
new file mode 100644
index 0000000..010c5d8
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-600italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-700.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-700.woff2
new file mode 100644
index 0000000..77d46ad
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-700.woff2 differ
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-700italic.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-700italic.woff2
new file mode 100644
index 0000000..4f26d0d
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-700italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-800.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-800.woff2
new file mode 100644
index 0000000..87bfa5b
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-800.woff2 differ
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-800italic.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-800italic.woff2
new file mode 100644
index 0000000..5805499
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-800italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-italic.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-italic.woff2
new file mode 100644
index 0000000..a662767
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-regular.woff2 b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-regular.woff2
new file mode 100644
index 0000000..8536068
Binary files /dev/null and b/_markemacht.de/assets/fonts/newsreader/newsreader-v26-latin-regular.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/font.css b/_markemacht.de/assets/fonts/noto-serif/font.css
new file mode 100644
index 0000000..96441eb
--- /dev/null
+++ b/_markemacht.de/assets/fonts/noto-serif/font.css
@@ -0,0 +1,144 @@
+/* noto-serif-100 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: normal;
+ font-weight: 100;
+ src: url('../fonts/noto-serif-v33-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-100italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: italic;
+ font-weight: 100;
+ src: url('../fonts/noto-serif-v33-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-200 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: normal;
+ font-weight: 200;
+ src: url('../fonts/noto-serif-v33-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-200italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: italic;
+ font-weight: 200;
+ src: url('../fonts/noto-serif-v33-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-300 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: normal;
+ font-weight: 300;
+ src: url('../fonts/noto-serif-v33-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-300italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: italic;
+ font-weight: 300;
+ src: url('../fonts/noto-serif-v33-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-regular - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/noto-serif-v33-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: italic;
+ font-weight: 400;
+ src: url('../fonts/noto-serif-v33-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-500 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: normal;
+ font-weight: 500;
+ src: url('../fonts/noto-serif-v33-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-500italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: italic;
+ font-weight: 500;
+ src: url('../fonts/noto-serif-v33-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-600 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: normal;
+ font-weight: 600;
+ src: url('../fonts/noto-serif-v33-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-600italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: italic;
+ font-weight: 600;
+ src: url('../fonts/noto-serif-v33-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-700 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: normal;
+ font-weight: 700;
+ src: url('../fonts/noto-serif-v33-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-700italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: italic;
+ font-weight: 700;
+ src: url('../fonts/noto-serif-v33-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-800 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: normal;
+ font-weight: 800;
+ src: url('../fonts/noto-serif-v33-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-800italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: italic;
+ font-weight: 800;
+ src: url('../fonts/noto-serif-v33-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-900 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: normal;
+ font-weight: 900;
+ src: url('../fonts/noto-serif-v33-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* noto-serif-900italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Noto Serif';
+ font-style: italic;
+ font-weight: 900;
+ src: url('../fonts/noto-serif-v33-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
\ No newline at end of file
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-100.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-100.woff2
new file mode 100644
index 0000000..461a15c
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-100.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-100italic.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-100italic.woff2
new file mode 100644
index 0000000..a989df5
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-100italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-200.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-200.woff2
new file mode 100644
index 0000000..7aee8fa
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-200.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-200italic.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-200italic.woff2
new file mode 100644
index 0000000..abfe76d
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-200italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-300.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-300.woff2
new file mode 100644
index 0000000..acec59d
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-300.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-300italic.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-300italic.woff2
new file mode 100644
index 0000000..d5b4788
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-300italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-500.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-500.woff2
new file mode 100644
index 0000000..a7b74d6
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-500.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-500italic.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-500italic.woff2
new file mode 100644
index 0000000..d370936
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-500italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-600.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-600.woff2
new file mode 100644
index 0000000..d55970e
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-600.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-600italic.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-600italic.woff2
new file mode 100644
index 0000000..febfe8e
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-600italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-700.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-700.woff2
new file mode 100644
index 0000000..e250137
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-700.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-700italic.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-700italic.woff2
new file mode 100644
index 0000000..b826f83
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-700italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-800.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-800.woff2
new file mode 100644
index 0000000..108d996
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-800.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-800italic.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-800italic.woff2
new file mode 100644
index 0000000..7cb24d0
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-800italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-900.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-900.woff2
new file mode 100644
index 0000000..9f48bf2
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-900.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-900italic.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-900italic.woff2
new file mode 100644
index 0000000..29ae5c3
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-900italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-italic.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-italic.woff2
new file mode 100644
index 0000000..ea5b4de
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-regular.woff2 b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-regular.woff2
new file mode 100644
index 0000000..c8f0c13
Binary files /dev/null and b/_markemacht.de/assets/fonts/noto-serif/noto-serif-v33-latin-regular.woff2 differ
diff --git a/_markemacht.de/assets/fonts/outfit/font.css b/_markemacht.de/assets/fonts/outfit/font.css
new file mode 100644
index 0000000..825a8b9
--- /dev/null
+++ b/_markemacht.de/assets/fonts/outfit/font.css
@@ -0,0 +1,72 @@
+/* outfit-100 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Outfit';
+ font-style: normal;
+ font-weight: 100;
+ src: url('../fonts/outfit-v15-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-200 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Outfit';
+ font-style: normal;
+ font-weight: 200;
+ src: url('../fonts/outfit-v15-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-300 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Outfit';
+ font-style: normal;
+ font-weight: 300;
+ src: url('../fonts/outfit-v15-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-regular - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Outfit';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/outfit-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-500 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Outfit';
+ font-style: normal;
+ font-weight: 500;
+ src: url('../fonts/outfit-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-600 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Outfit';
+ font-style: normal;
+ font-weight: 600;
+ src: url('../fonts/outfit-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-700 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Outfit';
+ font-style: normal;
+ font-weight: 700;
+ src: url('../fonts/outfit-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-800 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Outfit';
+ font-style: normal;
+ font-weight: 800;
+ src: url('../fonts/outfit-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* outfit-900 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Outfit';
+ font-style: normal;
+ font-weight: 900;
+ src: url('../fonts/outfit-v15-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
\ No newline at end of file
diff --git a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-100.woff2 b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-100.woff2
new file mode 100644
index 0000000..9ba01f2
Binary files /dev/null and b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-100.woff2 differ
diff --git a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-200.woff2 b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-200.woff2
new file mode 100644
index 0000000..e41b572
Binary files /dev/null and b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-200.woff2 differ
diff --git a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-300.woff2 b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-300.woff2
new file mode 100644
index 0000000..24dc096
Binary files /dev/null and b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-300.woff2 differ
diff --git a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-500.woff2 b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-500.woff2
new file mode 100644
index 0000000..264ce74
Binary files /dev/null and b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-500.woff2 differ
diff --git a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-600.woff2 b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-600.woff2
new file mode 100644
index 0000000..aa32da2
Binary files /dev/null and b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-600.woff2 differ
diff --git a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-700.woff2 b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-700.woff2
new file mode 100644
index 0000000..8674e73
Binary files /dev/null and b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-700.woff2 differ
diff --git a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-800.woff2 b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-800.woff2
new file mode 100644
index 0000000..fddb805
Binary files /dev/null and b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-800.woff2 differ
diff --git a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-900.woff2 b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-900.woff2
new file mode 100644
index 0000000..768bdf9
Binary files /dev/null and b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-900.woff2 differ
diff --git a/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-regular.woff2 b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-regular.woff2
new file mode 100644
index 0000000..2c401f5
Binary files /dev/null and b/_markemacht.de/assets/fonts/outfit/outfit-v15-latin-regular.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/font.css b/_markemacht.de/assets/fonts/plus-jakarta-sans/font.css
new file mode 100644
index 0000000..ac8b47c
--- /dev/null
+++ b/_markemacht.de/assets/fonts/plus-jakarta-sans/font.css
@@ -0,0 +1,112 @@
+/* plus-jakarta-sans-200 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: normal;
+ font-weight: 200;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-200italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: italic;
+ font-weight: 200;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-300 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: normal;
+ font-weight: 300;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-300italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: italic;
+ font-weight: 300;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-regular - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: italic;
+ font-weight: 400;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-500 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: normal;
+ font-weight: 500;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-500italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: italic;
+ font-weight: 500;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-600 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: normal;
+ font-weight: 600;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-600italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: italic;
+ font-weight: 600;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-700 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: normal;
+ font-weight: 700;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-700italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: italic;
+ font-weight: 700;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-800 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: normal;
+ font-weight: 800;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* plus-jakarta-sans-800italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Plus Jakarta Sans';
+ font-style: italic;
+ font-weight: 800;
+ src: url('../fonts/plus-jakarta-sans-v12-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
\ No newline at end of file
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-200.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-200.woff2
new file mode 100644
index 0000000..d060733
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-200.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-200italic.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-200italic.woff2
new file mode 100644
index 0000000..6ee9379
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-200italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-300.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-300.woff2
new file mode 100644
index 0000000..fadba49
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-300.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-300italic.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-300italic.woff2
new file mode 100644
index 0000000..b91a66d
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-300italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-500.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-500.woff2
new file mode 100644
index 0000000..3eeabdd
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-500.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-500italic.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-500italic.woff2
new file mode 100644
index 0000000..90510f5
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-500italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-600.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-600.woff2
new file mode 100644
index 0000000..d6e4d1e
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-600.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-600italic.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-600italic.woff2
new file mode 100644
index 0000000..b92055c
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-600italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-700.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-700.woff2
new file mode 100644
index 0000000..ca15140
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-700.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-700italic.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-700italic.woff2
new file mode 100644
index 0000000..80cbafa
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-700italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-800.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-800.woff2
new file mode 100644
index 0000000..cd71b26
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-800.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-800italic.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-800italic.woff2
new file mode 100644
index 0000000..4d4c46f
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-800italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-italic.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-italic.woff2
new file mode 100644
index 0000000..a23fc2a
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-regular.woff2 b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-regular.woff2
new file mode 100644
index 0000000..954c272
Binary files /dev/null and b/_markemacht.de/assets/fonts/plus-jakarta-sans/plus-jakarta-sans-v12-latin-regular.woff2 differ
diff --git a/_markemacht.de/assets/fonts/space-grotesk/font.css b/_markemacht.de/assets/fonts/space-grotesk/font.css
new file mode 100644
index 0000000..96897ca
--- /dev/null
+++ b/_markemacht.de/assets/fonts/space-grotesk/font.css
@@ -0,0 +1,40 @@
+/* space-grotesk-300 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Space Grotesk';
+ font-style: normal;
+ font-weight: 300;
+ src: url('../fonts/space-grotesk-v22-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* space-grotesk-regular - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Space Grotesk';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/space-grotesk-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* space-grotesk-500 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Space Grotesk';
+ font-style: normal;
+ font-weight: 500;
+ src: url('../fonts/space-grotesk-v22-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* space-grotesk-600 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Space Grotesk';
+ font-style: normal;
+ font-weight: 600;
+ src: url('../fonts/space-grotesk-v22-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* space-grotesk-700 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Space Grotesk';
+ font-style: normal;
+ font-weight: 700;
+ src: url('../fonts/space-grotesk-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
\ No newline at end of file
diff --git a/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-300.woff2 b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-300.woff2
new file mode 100644
index 0000000..8a92c4a
Binary files /dev/null and b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-300.woff2 differ
diff --git a/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-500.woff2 b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-500.woff2
new file mode 100644
index 0000000..0db251f
Binary files /dev/null and b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-500.woff2 differ
diff --git a/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-600.woff2 b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-600.woff2
new file mode 100644
index 0000000..a1db41a
Binary files /dev/null and b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-600.woff2 differ
diff --git a/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-700.woff2 b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-700.woff2
new file mode 100644
index 0000000..44604a0
Binary files /dev/null and b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-700.woff2 differ
diff --git a/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-regular.woff2 b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-regular.woff2
new file mode 100644
index 0000000..0e63471
Binary files /dev/null and b/_markemacht.de/assets/fonts/space-grotesk/space-grotesk-v22-latin-regular.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/font.css b/_markemacht.de/assets/fonts/work-sans/font.css
new file mode 100644
index 0000000..67edbc7
--- /dev/null
+++ b/_markemacht.de/assets/fonts/work-sans/font.css
@@ -0,0 +1,144 @@
+/* work-sans-100 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: normal;
+ font-weight: 100;
+ src: url('../fonts/work-sans-v24-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-100italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: italic;
+ font-weight: 100;
+ src: url('../fonts/work-sans-v24-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-200 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: normal;
+ font-weight: 200;
+ src: url('../fonts/work-sans-v24-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-200italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: italic;
+ font-weight: 200;
+ src: url('../fonts/work-sans-v24-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-300 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: normal;
+ font-weight: 300;
+ src: url('../fonts/work-sans-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-300italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: italic;
+ font-weight: 300;
+ src: url('../fonts/work-sans-v24-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-regular - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../fonts/work-sans-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: italic;
+ font-weight: 400;
+ src: url('../fonts/work-sans-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-500 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: normal;
+ font-weight: 500;
+ src: url('../fonts/work-sans-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-500italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: italic;
+ font-weight: 500;
+ src: url('../fonts/work-sans-v24-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-600 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: normal;
+ font-weight: 600;
+ src: url('../fonts/work-sans-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-600italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: italic;
+ font-weight: 600;
+ src: url('../fonts/work-sans-v24-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-700 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: normal;
+ font-weight: 700;
+ src: url('../fonts/work-sans-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-700italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: italic;
+ font-weight: 700;
+ src: url('../fonts/work-sans-v24-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-800 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: normal;
+ font-weight: 800;
+ src: url('../fonts/work-sans-v24-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-800italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: italic;
+ font-weight: 800;
+ src: url('../fonts/work-sans-v24-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-900 - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: normal;
+ font-weight: 900;
+ src: url('../fonts/work-sans-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* work-sans-900italic - latin */
+@font-face {
+ font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+ font-family: 'Work Sans';
+ font-style: italic;
+ font-weight: 900;
+ src: url('../fonts/work-sans-v24-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
\ No newline at end of file
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-100.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-100.woff2
new file mode 100644
index 0000000..5accb7d
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-100.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-100italic.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-100italic.woff2
new file mode 100644
index 0000000..da79a94
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-100italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-200.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-200.woff2
new file mode 100644
index 0000000..20ae477
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-200.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-200italic.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-200italic.woff2
new file mode 100644
index 0000000..1d66813
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-200italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-300.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-300.woff2
new file mode 100644
index 0000000..05cbc2a
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-300.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-300italic.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-300italic.woff2
new file mode 100644
index 0000000..d232974
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-300italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-500.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-500.woff2
new file mode 100644
index 0000000..2bad175
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-500.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-500italic.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-500italic.woff2
new file mode 100644
index 0000000..3027a66
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-500italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-600.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-600.woff2
new file mode 100644
index 0000000..1ec3048
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-600.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-600italic.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-600italic.woff2
new file mode 100644
index 0000000..44d9fe4
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-600italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-700.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-700.woff2
new file mode 100644
index 0000000..8236077
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-700.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-700italic.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-700italic.woff2
new file mode 100644
index 0000000..556d023
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-700italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-800.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-800.woff2
new file mode 100644
index 0000000..e7a9178
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-800.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-800italic.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-800italic.woff2
new file mode 100644
index 0000000..f09fb37
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-800italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-900.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-900.woff2
new file mode 100644
index 0000000..8db61c0
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-900.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-900italic.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-900italic.woff2
new file mode 100644
index 0000000..46c3f90
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-900italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-italic.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-italic.woff2
new file mode 100644
index 0000000..1c3a5be
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-italic.woff2 differ
diff --git a/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-regular.woff2 b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-regular.woff2
new file mode 100644
index 0000000..02a6a42
Binary files /dev/null and b/_markemacht.de/assets/fonts/work-sans/work-sans-v24-latin-regular.woff2 differ
diff --git a/_markemacht.de/assets/js/app.js b/_markemacht.de/assets/js/app.js
index ce1deed..cd72985 100644
--- a/_markemacht.de/assets/js/app.js
+++ b/_markemacht.de/assets/js/app.js
@@ -1,5 +1,6 @@
/* markemacht.de — Interaktionen
- * - Wirkung-Switch (monolithisch | editorial) + localStorage
+ * - Komponenten: Header/Footer
+ * - Wirkung-Switch (monolithisch | editorial) + Persistenz
* - Mobile Drawer
* - Scroll-Reveal (IntersectionObserver, max 400ms, ease-out)
* - Keyboard: ESC schließt Drawer
@@ -7,23 +8,84 @@
(function () {
'use strict';
+ /* ---------- Komponenten ------------------------------------------------ */
+
+ const COMPONENTS = [
+ ['[data-site-header]', './assets/components/header.html'],
+ ['[data-site-footer]', './assets/components/footer.html'],
+ ];
+
+ async function loadComponent(selector, url) {
+ const mount = document.querySelector(selector);
+ if (!mount) return;
+
+ try {
+ const res = await fetch(url, { cache: 'no-cache' });
+ if (!res.ok) throw new Error(`Component not found: ${url}`);
+ mount.innerHTML = await res.text();
+ } catch (err) {
+ console.error(err);
+ mount.setAttribute('data-component-error', 'true');
+ }
+ }
+
+ function initComponents() {
+ return Promise.all(COMPONENTS.map(([selector, url]) => loadComponent(selector, url)));
+ }
+
+ function getCurrentPage() {
+ const file = window.location.pathname.split('/').pop() || 'index.html';
+ if (file === 'index.html') return 'start';
+ if (file === 'manifest.html') return 'manifest';
+ if (file === 'methode.html') return 'methode';
+ if (file === 'denken.html' || file.startsWith('denken-')) return 'denken';
+ return '';
+ }
+
+ function initActiveNavigation() {
+ const current = getCurrentPage();
+ document.querySelectorAll('[data-nav-page]').forEach((link) => {
+ const isActive = link.getAttribute('data-nav-page') === current;
+ link.classList.toggle('is-active', isActive);
+ if (isActive) {
+ link.setAttribute('aria-current', 'page');
+ } else {
+ link.removeAttribute('aria-current');
+ }
+ });
+ }
+
/* ---------- Wirkung ---------------------------------------------------- */
const STORAGE_KEY = 'mm-wirkung';
const VALID = ['monolith', 'editorial'];
const DEFAULT = 'monolith';
+ function getCookie() {
+ const entry = document.cookie
+ .split('; ')
+ .find((row) => row.startsWith(`${STORAGE_KEY}=`));
+ if (!entry) return null;
+ const v = decodeURIComponent(entry.split('=').slice(1).join('='));
+ return VALID.includes(v) ? v : null;
+ }
+
+ function setCookie(mode) {
+ document.cookie = `${STORAGE_KEY}=${encodeURIComponent(mode)}; path=/; max-age=31536000; SameSite=Lax`;
+ }
+
function getStored() {
try {
const v = localStorage.getItem(STORAGE_KEY);
- return VALID.includes(v) ? v : null;
- } catch (_) { return null; }
+ return VALID.includes(v) ? v : getCookie();
+ } catch (_) { return getCookie(); }
}
function applyMode(mode) {
if (!VALID.includes(mode)) mode = DEFAULT;
document.documentElement.setAttribute('data-theme', mode);
try { localStorage.setItem(STORAGE_KEY, mode); } catch (_) {}
+ setCookie(mode);
syncButtons(mode);
}
@@ -59,6 +121,7 @@
drawer.classList.add('is-open');
document.body.classList.add('drawer-open');
drawer.setAttribute('aria-hidden', 'false');
+ openBtns.forEach((btn) => btn.setAttribute('aria-expanded', 'true'));
const firstLink = drawer.querySelector('a, button');
if (firstLink) firstLink.focus();
}
@@ -66,6 +129,7 @@
drawer.classList.remove('is-open');
document.body.classList.remove('drawer-open');
drawer.setAttribute('aria-hidden', 'true');
+ openBtns.forEach((btn) => btn.setAttribute('aria-expanded', 'false'));
}
openBtns.forEach((b) => b.addEventListener('click', open));
@@ -117,7 +181,9 @@
/* ---------- Boot ------------------------------------------------------- */
- function boot() {
+ async function boot() {
+ await initComponents();
+ initActiveNavigation();
initWirkung();
initDrawer();
initReveal();
diff --git a/_markemacht.de/audit.html b/_markemacht.de/audit.html
new file mode 100644
index 0000000..ce1dedf
--- /dev/null
+++ b/_markemacht.de/audit.html
@@ -0,0 +1,221 @@
+
+
+
+
+
+ Audit anfragen · MARKE MACHT
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
[00] Audit anfragen
+
+ Audit anfragen. Klarheit gewinnen.
+
+
+ Für Unternehmen, die merken: mehr Kommunikation löst das Problem nicht. Das Marken-Klarheits-Audit prüft, wo Sprache, Struktur und Führung an Erklärbarkeit verlieren.
+
+
+
+
+
+
+
+
+
+
+ [01] Worum es geht
+
+
+
+
+ Genau dort setzt das Audit an. Es untersucht nicht, ob eine Kampagne gefällt oder ob ein Logo modern wirkt. Es prüft, ob Ihr Unternehmen ein belastbares Regelwerk besitzt: klare Begriffe, nachvollziehbare Positionierung, konsistente Argumente und Grenzen, an denen Entscheidungen ausgerichtet werden können.
+
+
+ Dafür trennt es Substanz von Wirkung — und macht sichtbar, wo Bedeutung an einzelnen Personen hängt statt an dokumentierter Logik.
+
+
+
+
+
+
+
+
+ [02] Typische Auslöser
+
Wenn Klarheit operativ teuer wird.
+
+
+
+
+ Signal 01
+ Jeder erklärt anders.
+
+ Vertrieb, Führung und Marketing nutzen unterschiedliche Argumente. Der Markt bekommt kein eindeutiges Bild, intern entstehen Reibungsverluste.
+
+
+
+ Signal 02
+ Kommunikation hängt an Personen.
+
+ Wert, Tonalität und Positionierung stecken in Köpfen, aber nicht in einem anwendbaren System. Neue Mitarbeiter und externe Partner müssen raten.
+
+
+
+ Signal 03
+ Mehr Output löst weniger.
+
+ Content, Kampagnen und Designkorrekturen werden lauter, aber nicht klarer. Das eigentliche Fundament bleibt ungeprüft.
+
+
+
+
+
+
+
+
+
+
+ [03]
+
Drei Fragen. Keine Kosmetik.
+
+
+
+ [01] Material sichten
+ Was kommuniziert das Unternehmen heute?
+
+ Website, Sales-Unterlagen, Claims, Angebotslogik und zentrale Aussagen werden auf Wiederholbarkeit, Präzision und Widersprüche geprüft.
+
+
+
+ [02] Struktur freilegen
+ Welche Logik trägt die Marke wirklich?
+
+ Wir trennen Substanz von Dekoration: Identitätskern, Positionierungslogik, Sprachregeln, Themenrahmen und Grenzregeln.
+
+
+
+ [03] Diagnose formulieren
+ Wo muss zuerst geklärt werden?
+
+ Die Brüche werden priorisiert: welche akut sind, welche Grundlagen fehlen und welcher Schritt strategisch zuerst trägt.
+
+
+
+
+
+
+
+
+
+
[04] Das Ergebnis
+
Was am Ende steht.
+
+ Am Ende steht kein Foliensatz, sondern eine erste dokumentierte Marken-DNA: Identitätskern, Positionierungslogik, Sprachregeln, Themenrahmen und Grenzregeln — versioniert und an realen Texten geprüft. Dazu eine priorisierte Handlungsempfehlung: was jetzt zählt, was warten kann.
+
+
+ Format: 7–10 Tage, ein strukturierter Termin (90 Minuten), Vor- und Nachbereitung asynchron. Keine Workshops, keine Endlosschleifen.
+
+
+
+
+
+
+
+
+
[05] Anfrage
+
Passt das Audit zu Ihrer Situation?
+
+ Schreiben Sie kurz, wo die Unklarheit gerade sichtbar wird: Vertrieb, Website, Führung, Wachstum, Nachfolge oder Positionierung. Eine knappe Einordnung reicht für den ersten Kontakt.
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/_markemacht.de/denken-agilitaet.html b/_markemacht.de/denken-agilitaet.html
new file mode 100644
index 0000000..c093e84
--- /dev/null
+++ b/_markemacht.de/denken-agilitaet.html
@@ -0,0 +1,157 @@
+
+
+
+
+
+ Der Mythos der Agilität in starren Märkten · MARKE MACHT
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ arrow_back
+ Zurück zu Denken
+
+
+ System
+ 01.03.2024
+ 6 Min. Lesezeit
+
+
+ Der Mythos der Agilität in starren Märkten.
+
+
+ Warum die blinde Übernahme von Start-up-Methoden in mittelständischen Industrieunternehmen oft zu strukturellem Chaos statt zu Innovation führt. Ein Plädoyer für prozessuale Stabilität als Fundament echten Fortschritts.
+
+
+
+
+
+
+
+
+
+
+
+ „Agil" ist vom Werkzeug zum Glaubensbekenntnis geworden. Wo früher Prozesse standen, steht heute ein Versprechen: Wer schnell genug iteriert, gewinnt. Doch Geschwindigkeit ist keine Strategie — sie ist eine Eigenschaft. Und in Märkten mit langen Zyklen, hohen Investitionen und realer Haftung wird sie schnell zur Belastung.
+
+
+ Mittelständische Industrieunternehmen übernehmen Methoden, die für Software-Start-ups entworfen wurden: für Umgebungen, in denen ein Fehler ein Rollback ist und kein Produktrückruf. Was im digitalen Kontext als Lernschleife funktioniert, erzeugt in der physischen Welt Reibung, Nacharbeit und ein diffuses Gefühl permanenter Unfertigkeit.
+
+
+ Das eigentliche Problem ist selten die Methode. Es ist die Verwechslung von Aktivität mit Fortschritt. Ständige Umpriorisierung fühlt sich produktiv an, untergräbt aber genau das, was tragfähige Marken auszeichnet: Verlässlichkeit. Wenn jede Entscheidung morgen wieder verhandelbar ist, entsteht kein Fundament, sondern Sand.
+
+
+
+ Geschwindigkeit ohne Richtung ist nur teure Bewegung.
+
+
+
Stabilität ist kein Stillstand.
+
+ Die Gegenthese lautet nicht Trägheit. Sie lautet prozessuale Stabilität: ein klares Set unverhandelbarer Prinzipien, innerhalb derer schnell und konsequent gehandelt wird. Nicht alles steht zur Disposition. Genau diese Begrenzung erzeugt Tempo — weil sie das ständige Neuverhandeln der Grundlagen beendet.
+
+
+ Eine Marke, die als Regelwerk verstanden wird, liefert dieses Set. Sie definiert, was konstant bleibt, damit das Operative beweglich sein darf. Agilität wird so vom Selbstzweck zum Mittel: ein Werkzeug im Dienst einer Richtung, nicht ihr Ersatz.
+
+
+ Wer in starren Märkten gewinnen will, optimiert nicht die Iterationsgeschwindigkeit. Er klärt zuerst, was nie wieder zur Debatte steht — und wird dann genau dort schnell, wo Schnelligkeit tatsächlich zählt.
+
+
+
+
+
+
+
+
+
+
+ [Weiterlesen]
+
+
+
+
+
+ Diagnose
+ 15.02.2024
+
+
+
+
+ Marketingkampagnen lösen keine Identitätskrisen. Eine Analyse, wie Unternehmen Ressourcen verbrennen.
+
+
+
+
+
+
+
+
+
+
+
+
+
Klarheit statt Aktionismus.
+
+ Das Marken-Klarheits-Audit. Eine schonungslose Diagnose Ihres aktuellen Status Quo — bevor aus Bewegung Stillstand wird.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/_markemacht.de/denken-architektursanierung.html b/_markemacht.de/denken-architektursanierung.html
new file mode 100644
index 0000000..c9f9bf8
--- /dev/null
+++ b/_markemacht.de/denken-architektursanierung.html
@@ -0,0 +1,157 @@
+
+
+
+
+
+ Symptombekämpfung vs. Architektursanierung · MARKE MACHT
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ arrow_back
+ Zurück zu Denken
+
+
+ Diagnose
+ 15.02.2024
+ 8 Min. Lesezeit
+
+
+ Symptombekämpfung vs. Architektursanierung.
+
+
+ Marketingkampagnen lösen keine Identitätskrisen. Eine Analyse, wie Unternehmen Ressourcen verbrennen, weil sie kosmetische Korrekturen anstelle notwendiger struktureller Eingriffe vornehmen.
+
+
+
+
+
+
+
+
+
+
+
+ Wenn die Zahlen kippen, greifen die meisten Unternehmen zum nächstbesten Werkzeug: eine Kampagne, ein Rebrand, ein neuer Claim. Es ist die betriebswirtschaftliche Variante des Schmerzmittels — schnelle Linderung, keine Heilung. Das Symptom verschwindet kurz, die Ursache bleibt.
+
+
+ Eine Identitätskrise ist kein Sichtbarkeitsproblem. Sie ist ein Strukturproblem. Mehr Reichweite verstärkt nur, was ohnehin unklar ist. Wer eine diffuse Botschaft lauter sendet, bekommt nicht mehr Klarheit — er bekommt mehr Verwirrung, schneller.
+
+
+ Der Reflex zur kosmetischen Korrektur ist verständlich: Er ist sichtbar, schnell und politisch bequem. Strukturelle Eingriffe dagegen sind unbequem. Sie stellen Annahmen infrage, berühren Zuständigkeiten und liefern erst spät sichtbare Ergebnisse. Genau deshalb werden sie aufgeschoben — bis die Kosten des Aufschubs die Kosten des Eingriffs übersteigen.
+
+
+
+ Man kann ein Fundament nicht streichen, bis es trägt.
+
+
+
Diagnose vor Therapie.
+
+ Architektursanierung beginnt nicht mit der Lösung, sondern mit der ehrlichen Diagnose: Wo bricht die Logik? An welcher Stelle widersprechen sich Anspruch und Verhalten? Welche Entscheidungen werden immer wieder neu getroffen, weil das Regelwerk fehlt?
+
+
+ Erst wenn diese Fragen beantwortet sind, ist Kommunikation überhaupt sinnvoll. Eine saubere Struktur macht Kampagnen nicht überflüssig — sie macht sie effizient. Jeder eingesetzte Euro wirkt, weil er auf ein klares Fundament trifft statt auf einen Widerspruch.
+
+
+ Der teuerste Fehler ist nicht der strukturelle Eingriff. Es ist die Wiederholung der kosmetischen Korrektur, Quartal für Quartal, bis niemand mehr weiß, wofür die Marke eigentlich stand.
+
+
+
+
+
+
+
+
+
+
+ [Weiterlesen]
+
+
+
+
+
+ Einordnung
+ 28.01.2024
+
+
+
+
+ Wie der Verzicht auf neue Initiativen strategische Schlagkraft erzeugt.
+
+
+
+
+
+
+
+
+
+
+
+
+
Risse im Fundament finden.
+
+ Das Marken-Klarheits-Audit. Eine schonungslose Diagnose Ihres aktuellen Status Quo — strukturell, nicht kosmetisch.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/_markemacht.de/denken-fuehrung-durch-reduktion.html b/_markemacht.de/denken-fuehrung-durch-reduktion.html
new file mode 100644
index 0000000..9f03001
--- /dev/null
+++ b/_markemacht.de/denken-fuehrung-durch-reduktion.html
@@ -0,0 +1,157 @@
+
+
+
+
+
+ Führung durch Reduktion · MARKE MACHT
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ arrow_back
+ Zurück zu Denken
+
+
+ Einordnung
+ 28.01.2024
+ 5 Min. Lesezeit
+
+
+ Führung durch Reduktion.
+
+
+ Die größte Herausforderung moderner Unternehmensführung ist nicht das Hinzufügen neuer Initiativen, sondern das konsequente Eliminieren von Ablenkungen. Wie der Verzicht strategische Schlagkraft erzeugt.
+
+
+
+
+
+
+
+
+
+
+
+ Führung wird meist als Akt des Hinzufügens missverstanden: neue Ziele, neue Projekte, neue Programme. Doch jede Initiative kostet Aufmerksamkeit — die einzige wirklich knappe Ressource einer Organisation. Wer ständig addiert, führt nicht. Er verwaltet Überforderung.
+
+
+ Reduktion ist die anspruchsvollere Disziplin, weil sie Position verlangt. Etwas wegzulassen heißt, sich festzulegen, was nicht zählt. Das ist unbequem, angreifbar und genau deshalb wirksam. Eine Entscheidung erkennt man nicht daran, was sie ermöglicht, sondern daran, was sie ausschließt.
+
+
+ Organisationen ohne klare Grenzen verausgaben sich in der Breite. Jede Abteilung optimiert ihr Teiloptimum, niemand trägt das Ganze. Fokus entsteht nicht durch Motivation, sondern durch Struktur: durch ein Regelwerk, das viele Möglichkeiten bewusst verschließt, damit wenige konsequent verfolgt werden.
+
+
+
+ Strategie ist die Kunst, das Richtige nicht zu tun.
+
+
+
Der Verzicht als Hebel.
+
+ Eine tragfähige Marke ist hier das schärfste Führungsinstrument. Sie definiert den Themenrahmen und die Grenzregeln — also genau das, worüber geschwiegen wird und was die Marke zerstört. Damit wird Verzicht von einer Gefühlsfrage zu einer Regel, die jeder anwenden kann.
+
+
+ Das Ergebnis ist nicht weniger Aktivität, sondern weniger Streuung. Energie, die vorher in zwanzig Halbprojekten versickerte, konzentriert sich auf wenige, die tatsächlich Wirkung entfalten. Reduktion erzeugt so paradoxerweise mehr Schlagkraft als jede zusätzliche Initiative.
+
+
+ Führung durch Reduktion bedeutet, das Nein zur Standardantwort zu machen — damit das Ja Gewicht behält.
+
+
+
+
+
+
+
+
+
+
+ [Weiterlesen]
+
+
+
+
+
+ System
+ 01.03.2024
+
+
+
+
+ Warum die blinde Übernahme von Start-up-Methoden zu strukturellem Chaos führt.
+
+
+
+
+
+
+
+
+
+
+
+
+
Fokus ist eine Entscheidung.
+
+ Das Marken-Klarheits-Audit. Eine schonungslose Diagnose Ihres aktuellen Status Quo — damit klar wird, was zählt und was nicht.
+
+
+
+
+
+
+
+
+
+
+
diff --git a/_markemacht.de/denken.html b/_markemacht.de/denken.html
index 0463b1e..02fcf64 100644
--- a/_markemacht.de/denken.html
+++ b/_markemacht.de/denken.html
@@ -21,11 +21,18 @@
@@ -38,58 +45,7 @@
-
-
-
+
@@ -102,22 +58,44 @@
[01] Denken
Denken.
-
+
Ein Denkraum für Klarheit in komplexen Strukturen. Wir sezieren Architektur, Identität und Führung, um das Wesentliche freizulegen. Kein Rauschen. Nur Substanz.