# Phase 0 — Handoff > Stand: 2026-05-04 ## Was funktioniert - **Astro 6.2.2** mit Static-Output, `@astrojs/react`, `@astrojs/sitemap`, `@astrojs/mdx` - **Tailwind v4** via `@tailwindcss/vite` — alle Design-Tokens im `@theme inline`-Block in `src/styles/global.css` - **Self-hosted Fonts** in `public/fonts/`: Source Serif 4 Variable, Inter Variable, JetBrains Mono Variable (latin + latin-ext). Kein Google Fonts CDN. - **Design-Tokens** aus `digiformer-brand-system.md` korrekt umgesetzt: Electric Persimmon `oklch(0.71 0.22 38)`, Text-on-Accent `#2A0F02`, alle Surface-/Text-/Border-Token - **shadcn/ui-Primitives**: Button (3 Varianten: default/secondary/ghost), Input, Textarea, Label, Dialog — alle mit Brand-Token statt hardcodierten Farben - **BaseLayout** mit korrektem `` (OG-Tags, hreflang, canonical, font-preload), NavBar, Footer - **NavBar**: sticky, Mono-Wortmarke, 4 Nav-Links, DE/EN-Switcher (EN ausgegraut), CTA-Button, Hamburger-Icon mobil, Border-on-scroll - **Footer**: 4-Spalten (Marke, Produkt, Stack, Kontakt), Bottom-Bar mit Copyright + Impressum/Datenschutz - **Home** (`index.astro`): Hero-Sektion mit Eyebrow, H1 (Persimmon-Akzent auf "Grenzenlos"), Lead-Text, zwei CTAs - **`pnpm dev`** läuft auf `localhost:4321`, Typografie und Farben visuell verifiziert - **Astro-Telemetrie** deaktiviert ## Verzeichnisstruktur ``` src/ ├── components/ │ ├── primitives/ ← Button, Input, Textarea, Label, Dialog (React) │ ├── marketing/ ← NavBar.astro, Footer.astro │ └── islands/ ← (leer, für Phase 3: TesterForm, ContactForm) ├── content/ ← (leer, für Phase 1: module.ts) ├── layouts/ ← BaseLayout.astro ├── pages/ ← index.astro └── styles/ ← global.css ``` ## Was als Nächstes (Phase 1 — Komponenten-Bibliothek) Laut CLAUDE.md §9, Phase 1: 1. `Eyebrow`, `SectionHeading`, `NumberedItem` — primitive Layout-Bausteine 2. `StatusDot`, `ModuleCard`, `ModuleGrid` — Modul-Visualisierung 3. `TechStrip`, `SovereigntyBlock`, `RoadmapTimeline` — Sektions-Komponenten 4. `ObjectionAnswer`, `CTABlock` — Argumentations- und Abschluss-Komponenten 5. Dev-Seite: `/dev/components.astro` — alle Bausteine in allen Varianten ## Update 2026-05-04 — Hero Dark-Variante (verbindlich) CLAUDE.md §7.1 wurde mit verbindlicher Spec für dunkle Hero-Variante erweitert. Umsetzung: - **`src/pages/index.astro`** — Hero-Sektion komplett umgebaut: `#0E0F14`-Hintergrund, Off-White-Text `#F5F5F0`, Persimmon-Eyebrow mit `▸`-Prefix in `#FF6B2C`. Wort „Grenzenlos" als Background-Highlight (`#FF6B2C` bg, `#2A0F02` fg, padding `0 12px`, `box-decoration-break: clone`, kein border-radius). Tech-Strip läuft im selben dunklen Hintergrund weiter (`border 0.5px solid rgba(245,245,240,0.08)`, STACK-Label bei `0.85`-Opacity, Items bei `0.55`). Sentinel `
` markiert das Ende der dunklen Zone für die NavBar. - **`src/components/marketing/NavBar.astro`** — Dual-Mode-Implementierung. CSS-Klassen `.nav-bar--dark` und `.nav-bar--light` definieren je eigene Farb-Sätze (Logo, Links, Lang-Switch, CTA). Toggle per Scroll-Listener: `getBoundingClientRect()` des `data-hero-end`-Sentinels gegen NavBar-Höhe. Auf Nicht-Home-Seiten (Sentinel fehlt) immer Light-Mode. Transition 200ms. Visuell verifiziert via preview_inspect: `bg = rgb(14,15,20)`, Highlight-Farben korrekt, `box-decoration-break: clone` aktiv (mit -webkit-Prefix), NavBar-Dark-Mode bei scrollY=0, Light-Mode-Switch beim Sentinel-Crossing nachgewiesen. ## Phase 1 abgeschlossen — Komponenten-Bibliothek Alle 11 Marketing-Komponenten plus Daten-Foundation und Showcase-Seite stehen. **Neue Dateien:** - `src/content/module.ts` — Modul-Typen, 19 Module aus Appendix A, `statusLabel`/`pillarTitles`-Maps - `src/components/marketing/Eyebrow.astro` — Mono-Caption mit Tone-Varianten (`tertiary` / `accent` / `inverse`), optionalem `prefix` (z.B. `▸`) und Status-Pille - `src/components/marketing/StatusDot.astro` — vier Status-Glyphen rein per CSS (gefüllt / halbgefüllt / outline / dashed), monochrom, mit `inverse`-Variante für dunkle Hintergründe - `src/components/marketing/SectionHeading.astro` — `h2` mit optionalem Eyebrow + Subtitle, `display`-Variante für „große Versprechen"-Sektionen, inverse-Modus - `src/components/marketing/NumberedItem.astro` — Mono-Nummer + Serif-Title + Body-Slot - `src/components/marketing/ModuleCard.astro` / `ModuleGrid.astro` — eine Säulen-Karte und das 4-Spalten-Grid mit optionaler Status-Legende - `src/components/marketing/TechStrip.astro` — extrahiert aus `index.astro`, hat `dark`/`light`-Varianten - `src/components/marketing/SovereigntyBlock.astro` — 2-Spalten-Layout mit Display-Headline links und 2×2-Border-Left-Items rechts - `src/components/marketing/RoadmapTimeline.astro` — vertikale Linie mit Phase-Markern, current-Pille - `src/components/marketing/ObjectionAnswer.astro` — Serif-Frage als Quote, Body-Slot - `src/components/marketing/CTABlock.astro` — Eyebrow + Headline + Body + bis zu 3 CTAs (`primary`/`secondary`/`ghost`), `inverse`-Modus - `src/pages/dev/components.astro` — interne Showcase-Seite mit jeder Komponente in jeder Variante (nicht im Sitemap) - `public/og-default.png` — 1200×630 Platzhalter, gespiegeltes Hero-Layout, generiert via `node scripts/generate-og.mjs` - `scripts/generate-og.mjs` — Skript zur Regeneration - `sharp` zur Dev-Dependency-Liste ergänzt (für OG-Generierung; war ohnehin transitiv via Astro vorhanden) **Geänderte Dateien:** - `src/pages/index.astro` — Tech-Strip-Inline-Code durch `` ersetzt, identisches visuelles Ergebnis - `CLAUDE.md` §0 + §4.1 — „Astro 5" → „Astro 6" (stillschweigender Versions-Update wie abgesprochen) **Visuell verifiziert:** Komplettes Durchscrollen von `/dev/components` und Re-Check von `/`. Status-Glyphen monochrom korrekt, Persimmon-Akzent sparsam (nur Hero-Highlight, current-Pille, primary CTAs, Eyebrow-accent-Variante, Border-Left auf SovereigntyBlock-Items), keine Drop-Shadows oder Gradients. ## Phase 2 abgeschlossen — Home Alle 9 Sektionen aus CLAUDE.md §7.1 sind in `src/pages/index.astro` komponiert: 1. Hero (dark) — unverändert aus Phase 0/1 2. Tech-Strip (dark) — unverändert 3. Modul-Landschaft — `` mit Legende, Eyebrow nutzt `modules.length` (aktuell 19), Footer-Link auf `/module` 4. Was uns trennt — 3 `` 01/02/03, Surface-White-Hintergrund 5. Souveränität — `` mit dreizeiliger Display-Headline, vier Border-Left-Items 6. Roadmap-Snapshot — `` mit 4 Phasen, „Heute" mit Aktuell-Pille (Persimmon) 7. Schnell-Argumentarium — 5 `` im 2-Spalten-Grid, fünfter wraps unten allein (per Spec) 8. Tester-Programm-Teaser — `` mit Primary + Ghost-Mail-Link 9. Final-CTA — `` mit Primary + Secondary, dunkler Hintergrund symmetrisch zum Hero **Visueller Rhythmus:** Dunkel (Hero+Strip+Sentinel) → hell → surface-white → hell → surface-white → hell → surface-white → dunkel (Final-CTA). Wechselnde Bg-Töne strukturieren ohne Bordüren. **NavBar Dual-Mode** verifiziert: bei `scrollY=0` über Hero `nav-bar--dark` aktiv, beim Body-Scroll wechselt korrekt zu `nav-bar--light`. Beim Final-CTA bleibt sie hell (Sentinel ist nach Sektion 2 platziert). **Verifiziert per DOM-Inspection:** Alle Sektionen rendern mit korrekter Bg, Eyebrow, Headline. Auto-Count im Modul-Eyebrow funktioniert (`VIER SÄULEN · 19 MODULE`). **Inhaltliche Hinweise an Pascal:** - CLAUDE.md erwähnt mehrfach „16 Module", in `module.ts` (Appendix A) sind aber 19 hinterlegt. Der Eyebrow rendert dynamisch aus den Daten — `19 MODULE`. Wenn 16 die richtige Marketing-Aussage ist, kürze ich die Modul-Liste; wenn 19 stimmt, aktualisiere ich CLAUDE.md §0/§1. - Die `Aktuell`-Pille auf der Roadmap nutzt Persimmon-Bg + dunklen Text — passt zum Brand-System §3.5 („Status-Pille aktuelle Phase"). - Final-CTA-Headline ist bewusst eine zusammengefasste Version der zwei Sätze aus §7.1 §9 („30 Minuten, kostenlos, unverbindlich..." + „Sie schildern, wo Sie stehen..."). Wenn du beide Sätze willst, splitte ich es in body + headline. ## Update — EN-Variante + Sprachumschaltung (vorgezogen aus Phase-2-Backlog) EN war ursprünglich Phase 2 (CLAUDE.md §9 Phase 6: „EN-Variante mit `astro-i18n` oder Manual-Routing"). Auf Pascal-Wunsch jetzt vorgezogen. **Routing:** Astro built-in i18n in `astro.config.mjs`, `defaultLocale: 'de'`, `prefixDefaultLocale: false`. → `/` bleibt DE, `/en/` ist EN. **Neue/Geänderte Dateien:** - `astro.config.mjs` — i18n-Block, sitemap mit Locale-Map - `src/content/module.ts` — `nameEn`, `pillarTitleEn`, `descriptionEn` pro Modul; `statusLabelEn`/`pillarTitlesEn`-Maps; Helper `getModuleName/getStatusLabel/getPillarTitle(item, lang)` - `src/i18n/strings.ts` — zentrale UI-Strings DE/EN für NavBar, Footer, Roadmap-Pille; `getLangFromPath()` und `getLocalizedPath()` - `src/layouts/BaseLayout.astro` — auto-detect Lang aus Pfad, ``, hreflang DE/EN/x-default, og:locale, lokalisierte Default-Description - `src/components/marketing/NavBar.astro` — Sprachumschalter mit aktiv/inaktiv-States in beiden Modi (dark/light), Links via `getLocalizedPath()`, lang-spezifische Nav-Pfade (`/module` vs `/en/module` etc.) - `src/components/marketing/Footer.astro` — alle Strings aus i18n-Dict - `src/components/marketing/StatusDot.astro` / `ModuleCard.astro` / `ModuleGrid.astro` / `RoadmapTimeline.astro` — `lang`-Prop (Default `'de'`) - `src/pages/en/index.astro` — komplette englische Home, gleiche 9 Sektionen mit übersetzten Inhalten **Verifiziert:** - `/` → ``, deutsche Inhalte, DE aktiv im Switcher - `/en/` → ``, englische Inhalte, EN aktiv im Switcher - Switcher-Links: DE-Button auf `/en/` führt zu `/`, EN-Button auf `/` führt zu `/en/` - hreflang reziprok auf beiden Seiten, `x-default` zeigt auf DE - Modul-Namen: „Aufgaben" (DE) / „Tasks" (EN), „Belege" / „Documents", etc. Status-Labels und Säulen-Titel ebenfalls übersetzt - NavBar-Dual-Mode funktioniert auf EN-Seite identisch (dark über Hero, light beim Body-Scroll) - `/dev/components` rendert weiterhin fehlerfrei (alle Komponenten haben `lang`-Default `'de'`) **Nicht-übersetzte Pfade (Hinweis):** EN-NavBar verlinkt auf `/en/module`, `/en/sovereignty`, `/en/roadmap`, `/en/tester` — diese Seiten existieren noch nicht (auch nicht in DE), 404 bis Phase 3+4 sie liefern. Footer-Links analog. Sprachumschalter geht von `/en/foo` zurück nach `/foo` (oder umgekehrt) — wenn die DE-Variante nicht existiert, landet der User auf der DE-404 mit deutscher Sprache. **Inhaltliche Hinweise an Pascal:** - Module-Eigennamen bleiben in beiden Sprachen identisch wo sinnvoll (CRM, Helpdesk, WhatsApp), übersetzte Konzepte sonst (Belege → Documents, Versand → Shipping, BuHa-Export → Accounting export, Personal → HR, Zeiterfassung → Time tracking) - „Tester" im EN als „Testers" für die Nav, „Become a tester" als CTA. Wenn du „Beta tester" oder „Pilot user" stärker findest, ändere ich - Hero-Headline EN: „Start lean. Grow without limits." mit Highlight nur auf „Grow" (statt „Grenzenlos"). Andere Variante denkbar: „Grow boundless." oder „Scale without limits." — sag wenn du eine bestimmte willst - Tech-Strip EN: DSGVO → GDPR (selbe Sache, andere Schreibung), Rest unverändert - Sektion 5 Souveränität: „Your data. Your country. Your control." spiegelt das DE 1:1 - Imprint/Privacy: Deutsche Pflichtseiten haben deutsche URLs (`/impressum`, `/datenschutz`); EN-Footer linkt auf `/en/imprint` und `/en/privacy`. Diese müssen in Phase 4 angelegt werden — englische Pflichtseiten sind rechtlich zwar nicht erforderlich, aber Usability-relevant ## Phase 3 abgeschlossen — Module + Tester (Scope C, ohne Form) Pascal-Entscheidung: Form-Anbindung auf Phase 3.5 verschieben, weil `app.slimcore.io` produktiv noch nicht live ist (nur `app.staging.slimcore.io`). Marketing-Site geht ohne Form-Submission live, Tester-Anmeldung läuft über Mail + Calendly bis Production-App + Form fertig sind. **Neue Dateien:** - `src/pages/module.astro` — DE Modul-Seite, Hero-light + ModuleFilter-Island + `