702 lines
78 KiB
Markdown
702 lines
78 KiB
Markdown
# Anelia Wolf – Website Design-Spec („Die Ausgabe“)
|
||
|
||
Stand: 2026-09-02 · webklar (Kenso) mit Claude · Status: verbindliche Build-Grundlage
|
||
|
||
Entstanden aus Research (Brand-Fakten, Awwwards/CSSDA 2024–2026, React Bits/21st.dev/Magic UI,
|
||
Typografie/Palette, Nischen- und Rechts-Research), drei unabhängigen Kreativkonzepten und einer
|
||
dreiköpfigen Jury (Art Director, Frontend-Engineer, B2B-Einkäuferin). Die Synthese der Jury folgt ab
|
||
Abschnitt „Final Creative Direction“ unverändert (englische Spec-Prosa, deutsche Copy).
|
||
Rohdaten: `scratchpad/research-dump.json`, Rechtstext-Vorlagen: `scratchpad/legal-templates.md`.
|
||
|
||
## A. Verbindliche Abweichungen gegenüber der Synthese (gelten vorrangig)
|
||
|
||
1. **Display-Serif = Bodoni Moda** (variable, `opsz` 6–96, normal + italic), NICHT Cormorant Garamond.
|
||
Grund: Jury 1 („Cormorant + Champagner-Gold + Elfenbein ist die 2024–26-Coach-Default-Palette“);
|
||
die Synthese nennt Bodoni Moda selbst als dokumentierten Ein-Zeilen-Swap. Bodoni ist die Didone
|
||
des Mode-Mastheads (Vogue-Logik = Magazin-Konzept), ihre Haarlinien rhythmisieren mit dem goldenen
|
||
Einzelstrich des Wolfs, und sie ist deutlich seltener in KI-generierten Seiten. Überall, wo die
|
||
Synthese „Cormorant“ sagt, gilt: Bodoni Moda 400 (Display `opsz` 96, H2 `opsz` 72, ≥ 28 px `opsz` 36),
|
||
Italic für genau ein Betonungswort pro Headline und Zitate. **Bodoni nie unter 28 px**; alles
|
||
darunter (H3 < 28 px, Small-Caps-Namen, Ledger-Titel auf Mobile) in Jost 400/500.
|
||
2. **Fonts über `next/font/google`** (Jost variable, DM Mono 400/500, Bodoni Moda variable normal+italic
|
||
mit `axes: ["opsz"]`) – werden im Build eingebettet, kein Google-Request (verifiziert). Kein
|
||
`next/font/local`, keine woff2 im Repo. CSS-Variablen: `--font-jost`, `--font-mono-face`, `--font-bodoni`;
|
||
Tailwind-Tokens `font-sans`, `font-mono`, `font-display`.
|
||
3. **Lenis:** der vorhandene `SmoothScroll`-Provider (`src/components/providers/SmoothScroll.tsx`,
|
||
ticker-getrieben, `window.lenis`) bleibt; kein `lenis/react`. Route-Wechsel: `lenis.scrollTo(0, {immediate: true})`.
|
||
4. **Theme-Attribute:** `data-theme="dark" | "light"` (bereits in `globals.css`), nicht „ink/ivory“.
|
||
Live-Paar `--bg/--fg/--fg-muted/--accent/--line/--surface` + Tailwind-Tokens `bg-bg text-fg text-accent border-line bg-surface`.
|
||
5. **Korn:** statische CSS-Pseudo-Ebene `.grain` (bereits in `globals.css`), kein Canvas, kein Blend-Mode-Wechsel per JS.
|
||
6. **Monogramm:** `public/brand/logo-mark.svg` wird zur Build-Zeit geprüft (`fs.existsSync`); vorhanden →
|
||
inline mit `data-draw`-Pfaden; sonst `src/components/brand/WolfMark.tsx` (eigene SVG-Näherung, Pfade
|
||
`.wolfmark-v` / `.wolfmark-wolf[data-draw]`, Gradient `#wolf-gold`). Der Wolf-Hals-Handoff in die
|
||
erste Hairline gilt für beide Varianten (Hairline startet an der unteren Kante des Monogramms).
|
||
7. **Fotos:** Existenz zur Build-Zeit über `src/lib/assets.ts` (`fs.existsSync("public/photos/…")`);
|
||
fehlende Bilder → dokumentierte Variante B (ohne Foto). Keine Laufzeit-Fetches.
|
||
8. **Flags** in `src/lib/site.ts`: `flags = { showPlaceholders: true /* bis Launch */, showFaq: true,
|
||
showStimmen: false, showSpeakerPdf: false, showSecondTalk: false, show24hPromise: false, showIndustry: false, showTwins: true }`.
|
||
FAQ wird mit den in der Synthese formulierten Antworten ausgeliefert (Preise = „auf Anfrage“).
|
||
9. **Platzhalter im Impressum/Datenschutz** werden sichtbar als `[…]` in `--gold-deep` gerendert (nicht
|
||
ausgeblendet), damit sie vor Launch nicht übersehen werden; Liste in `src/lib/legal.ts` (`LEGAL_TODO`).
|
||
10. **Component-Libraries:** React-Bits-/Magic-UI-Komponenten werden NICHT installiert, sondern die
|
||
fünf Primitive (Rule, Lines, Reveal, Draw, Door) werden in-house mit GSAP 3.15 (SplitText, DrawSVG,
|
||
ScrollTrigger sind frei) und `motion/react` gebaut. Scroll-Progress-Hairline in-house.
|
||
11. **Routen:** `/`, `/leistungen/coaching/`, `/leistungen/trainings/`, `/leistungen/keynotes/`,
|
||
`/impressum/`, `/datenschutz/`, 404. Nav-Konstanten in `src/lib/site.ts`.
|
||
12. **Copy:** die Synthese-Copy ist final; „Medizinprodukte“ bleibt weg (`showIndustry: false`),
|
||
„B2B-Außendienst“ bleibt drin, Zwillinge-Satz bleibt drin (Freigabe in Offene Fragen), „Unlock your
|
||
Sales-DNA“ bleibt weg, „Antwort innerhalb von 24 Stunden“ bleibt weg.
|
||
|
||
## B. Erfolgskriterien & QA (vor „fertig“)
|
||
1. `npx tsc --noEmit`, `npm run lint`, `npm run build` grün; `out/` enthält alle 7 Routen.
|
||
2. Browser-Screenshots 1440×900 und 390×844 jeder Seite (Hero, Mitte, Footer, Menü offen, 404) geprüft.
|
||
3. `prefers-reduced-motion`: alles sichtbar, kein Pin, kein Vorhang, Wolf fertig gezeichnet.
|
||
4. Netzwerk: keine Requests außer eigener Origin; kein `localStorage`/`sessionStorage`/`document.cookie` im Bundle.
|
||
5. Kontrast: Gold-Text nur auf dunkel, `--gold-deep` auf hell; Headline über Foto mit Scrim.
|
||
6. AI-Tell-Check und Handgemacht-Signale gemäß Abschnitt 11 der Synthese.
|
||
|
||
---
|
||
|
||
# ANELIA WOLF — Final Creative Direction
|
||
|
||
**Direction:** DIE AUSGABE (final cut) — the editorial concept, with the wolf-to-line handoff, door-mask photography and the offer-table/speaker-facts blocks grafted in from the two other directions.
|
||
**Decision basis:** 2 of 3 judges chose DIE AUSGABE (engineer 48, strategist 48); the art director chose Der Goldene Faden by one point (44 vs 43) but conditioned the win on a half-day spike of the site-wide thread and named DIE AUSGABE's skeleton as the fallback. The final direction takes the AUSGABE skeleton, imports every "best idea to keep" the judges flagged where it doesn't add a fragile mechanism, and resolves every critique below.
|
||
|
||
---
|
||
|
||
## 0. Judge critiques → resolutions
|
||
|
||
| # | Critique (judge) | Resolution in this spec |
|
||
|---|---|---|
|
||
| 1 | Magazine meta-language ("Kapitel 01 — Vorwort", "Heft II", "Folio 03/06") taxes B2B readers (all three) | The magazine is the **internal** logic only. Reader-facing text never says Kapitel/Heft/Folio/Vorwort. Sections carry a mono numeral (`01`–`06`) and a plain eyebrow ("Positionierung", "Leistungen", "Das WOLF-Prinzip", "Über Anelia", "Für wen", "Kontakt"). Service pages have no roman numerals; the masthead middle slot shows the plain page name. The folio counter shrinks to `01 / 06` in mono, bottom right, no words. |
|
||
| 2 | "Drei Leserinnen, drei Leser." is designer jargon (strategist) | H2 is **„Für wen ich arbeite.“** |
|
||
| 3 | "Drei Fragen. Ein Prinzip." followed by "Drei Wege. Ein Prinzip." is a copy tic (strategist) | Positionierung keeps „Drei Fragen. Ein Prinzip.“; Leistungen becomes **„Coaching. Training. Bühne.“** |
|
||
| 4 | "Ein Impuls, der am Montag noch trägt/beschäftigt" is a trainer cliché (strategist) | Removed everywhere. Replaced by „Ein Impuls, der nachwirkt.“ (once, keynote page) and otherwise concrete nouns. |
|
||
| 5 | Headline running over the portrait fails contrast on the photo half (engineer) | Portrait gets a horizontal ink scrim in the overlap zone (`linear-gradient(90deg, var(--ink) 0%, rgba(15,14,12,.72) 30%, transparent 60%)`) in addition to the top-third darkening; headline glyphs over the photo are checked at ≥ 4.5:1; below 1280px the headline is capped at columns 1–8 so it no longer crosses the face. |
|
||
| 6 | Ledger hover "title flips to italic" reflows the row (engineer) | Roman and italic titles are rendered as two stacked layers in one grid cell (`grid-area: 1/1`), crossfaded by opacity; the cell width is the wider of the two. No reflow. |
|
||
| 7 | Tweening `--bg` on `<body>` every frame + blended grain = full-page composite (engineer, Faden) | Only `--bg`/`--fg` on `<body>` are tweened, only within a 40vh window per boundary (scrub 0.4). The grain layer is its own compositor layer (`position: fixed; inset: 0; transform: translateZ(0); contain: strict; pointer-events: none`). `mix-blend-mode: overlay` is applied only at ≥ 1024px and `(pointer: fine)`; on touch the grain is a plain 5% opacity layer. Must be tested on a mid-range Android before launch. |
|
||
| 8 | LCP / no-JS: masked hero lines invisible until hydration (engineer) | Server HTML is fully visible. A 3-line inline `<head>` script adds `html.js`. Mask/clip initial states apply only under `html.js`. Hero timeline starts on `document.fonts.ready` with a 1.5 s timeout fallback. Hero portrait carries `priority` + `fetchpriority="high"`. |
|
||
| 9 | Sticky numeral / eyebrow colour must flip with the body tween (engineer) | Every section carries a static `data-theme="ink|ivory"`. Colour of numerals, eyebrows, hairlines, links and header is driven by `[data-theme]` selectors, never by the tween. The tween only crossfades the page ground. |
|
||
| 10 | Roman numerals / "Heft I" must never be the primary way to find "Trainings" (engineer) | Removed. Nav, ledger, footer, menu and folio always show the service names in full. |
|
||
| 11 | Five font files, subset & preload (engineer) | `next/font/local`, 5 woff2 files subset to latin + latin-ext (~210 KB total); preload only Cormorant 300 and Jost variable; DM Mono and Cormorant italic load lazily. Geist is removed from `layout.tsx`. |
|
||
| 12 | Cormorant + gold + ivory is the default "luxury coach" palette of 2024–26 (art director) | Cormorant is restricted to display ≥ 40 px, one italic word per headline, and quotes. Everything else — nav, eyebrows, buttons, wordmark, ledgers, body, meta — is Jost caps and DM Mono, so the page surface is dominated by Futura-genome caps and tabular mono ledgers, not by serif. H2 on ivory is 400, never 300. Ledger and table share on every page is ≥ 40% of viewports. If the client wants a harder edge after the first mockup, the documented fallback is Bodoni Moda (opsz 96) as a one-line swap in `fonts.ts` — no layout change. |
|
||
| 13 | Concept risks tipping toward beauty/wedding (art director, Ausgabe's own risk) | Counterweights are mandatory, not optional: dark hero, DM Mono ledgers, hard rectangles (radius 0 everywhere), B2B nouns in the first viewport (Vertriebstraining, Neukunden, Bestandskunden), the spec-table service pages, the Speaker-Facts strip. |
|
||
| 14 | Hover-only keywords hide information on desktop (art director, Faden) | Ledger keywords are always visible (they were in Ausgabe; the rule is now explicit). Nothing on the site is hover-only content. |
|
||
| 15 | Thread is the best idea but fragile (all three) | The site-wide thread is **not** built. Its two safe fragments are: (a) `::before` hairline ticks before every eyebrow (no-JS baseline), (b) a local wolf-neck → hairline handoff inside the hero SVG. No document-height SVG, no anchor measuring. |
|
||
| 16 | W·OLF hero + header migration is the best single Auftritt idea, but FLIP + 3 pins won't ship in 2 days (engineer, strategist) | Not adopted. Documented in §13 as a v2 candidate. The monogram already appears in the header from first paint on all pages. |
|
||
| 17 | Nebentätigkeit / employer naming, years, "Unlock your Sales-DNA", "Antwort in 24h" (all) | Copy ships without employer, without industry unless approved ("B2B-Außendienst"), without years. The second talk title and the 24-hour promise are gated behind a build flag and listed in §12. |
|
||
|
||
---
|
||
|
||
## 1. Direction name & narrative
|
||
|
||
**DIE AUSGABE — Anelia Wolf, Ausgabe 01**
|
||
|
||
Anelia Wolf's logo is already a printed title page: a wordmark in wide-tracked Futura caps, a single gold hairline, a sub-line. None of it is web aesthetics; all of it is print. The website takes the logo literally and is built as the first issue of a magazine with one protagonist — but the reader never needs to know that. What the reader sees is a dark cover with a headline that runs across her portrait, ivory reading pages with sticky numerals in the gutter, a table of contents that is also the service navigation, the WOLF-Prinzip typeset as an equation, a Werdegang typeset as a ledger, and a colophon that is her own wordmark. What the reader never sees is an icon card, a testimonial carousel, a counter, a gradient blob or a glow.
|
||
|
||
Her brand lives on two poles that coach websites never reconcile: feminine-premium (Zahntechnik, Premium-Retail, Keynote) and hard-concrete (Kaltakquise, Außendienst, Umsatz). Print has carried that tension for a hundred years — Cormorant at 300 next to tabular DM Mono figures, ivory paper next to a night-black spread. The structure stays "schlicht" (seven sections, three service pages, two legal pages); the WOW comes from precision: typesetting, rhythm, and a choreography in which everything moves like type being laid onto paper — masks, lines that draw, pages that turn.
|
||
|
||
Gold is rationed like gold leaf: the wolf's stroke, hairlines, numerals, eyebrows, one gradient word per page. The wolf is drawn once on load — left V, right V, then the head — and its neck runs, without a break, into the first hairline of the page: the logo is the source of the page, not an ornament placed on it.
|
||
|
||
---
|
||
|
||
## 2. Palette, gold gradient, section rhythm
|
||
|
||
### 2.1 Tokens (`@theme` in `globals.css`)
|
||
|
||
| Token | Hex | Role |
|
||
|---|---|---|
|
||
| `--ink` | `#0F0E0C` | Dark page ground (hero, Prinzip, Kontakt/Footer, service-page heroes, contact bands). Never `#000`. |
|
||
| `--ink-2` | `#191714` | Raised dark surface: header after scroll on ink sections, overlay-menu frame, hover row on dark ledgers. |
|
||
| `--line-dark` | `#2A2722` | 1 px hairlines on ink. Decorative only. |
|
||
| `--ivory` | `#F6F1E8` | Paper. Ground of all reading sections and legal pages. |
|
||
| `--bone` | `#EEE6D8` | Termine ledger block, quote blocks, Rahmen tables, ledger row hover on ivory. Always with 1 px `--line-light`. |
|
||
| `--line-light` | `#DCD3C3` | 1 px hairlines on ivory/bone. |
|
||
| `--grey-warm` | `#A8A196` | Secondary text on dark (7.54:1 on ink). |
|
||
| `--grey-deep` | `#5E5A52` | Secondary text on light (6.10:1 on ivory). |
|
||
| `--gold` | `#C9A24D` | Flat gold: text, strokes, hairlines, focus rings on **dark only** (8.05:1). Hover fill of the primary button (ink text, 8.05:1). |
|
||
| `--gold-deep` | `#7D5F1B` | Gold for text/UI on **light** (5.30:1 on ivory, 4.81:1 on bone). |
|
||
| `--gold-700` | `#A37A2C` | Large display numerals on ivory (≥ 40 px only, 3.47:1 = AA-large). |
|
||
| `--gold-100` | `#F4E5B8` | Champagne gradient stop 0 % / sheen colour. |
|
||
| `--gold-200` | `#E6C97A` | Gradient stop 22 %. |
|
||
| `--gold-900` | `#6E501A` | Gradient stop 100 %; strokes/surfaces only, never text. |
|
||
|
||
Contrast rules that are enforced as lint-able CSS: `--gold` is never used as `color` inside `[data-theme="ivory"]`; `.gold-text` is only permitted on `[data-theme="ink"]` and at `font-size >= 2.5rem`.
|
||
|
||
### 2.2 Gold gradient CSS
|
||
|
||
```css
|
||
:root {
|
||
/* metallic ramp — SVG strokes, monogram, surfaces (never text) */
|
||
--gold-gradient: linear-gradient(135deg, #F4E5B8 0%, #E6C97A 22%, #C9A24D 48%, #A37A2C 74%, #6E501A 100%);
|
||
/* text-safe ramp — stops at --gold-700 (4.94:1 on ink); display ≥ 40px on dark only */
|
||
--gold-gradient-text: linear-gradient(100deg, #F4E5B8 0%, #E6C97A 32%, #C9A24D 62%, #A37A2C 100%);
|
||
/* 1px hairline with champagne centre, fading ends — dark grounds */
|
||
--gold-hairline: linear-gradient(90deg, transparent 0%, #C9A24D 18%, #F4E5B8 50%, #C9A24D 82%, transparent 100%);
|
||
/* 1px hairline for light grounds — solid ends */
|
||
--gold-hairline-light: linear-gradient(90deg, #A37A2C 0%, #C9A24D 35%, #E6C97A 50%, #C9A24D 65%, #A37A2C 100%);
|
||
/* hover sweep for the primary CTA: background-size 250%, background-position 0% → 100% in .6s */
|
||
--gold-sheen: linear-gradient(115deg, #A37A2C 0%, #C9A24D 30%, #F4E5B8 50%, #C9A24D 70%, #A37A2C 100%);
|
||
}
|
||
|
||
.gold-text {
|
||
color: #C9A24D;
|
||
background: var(--gold-gradient-text);
|
||
-webkit-background-clip: text; background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
/* SVG monogram gradient (inline <defs>) */
|
||
/* <linearGradient id="wolf-gold" x1="0" y1="0" x2="1" y2="1">
|
||
<stop offset="0" stop-color="#F4E5B8"/>
|
||
<stop offset=".22" stop-color="#E6C97A"/>
|
||
<stop offset=".48" stop-color="#C9A24D"/>
|
||
<stop offset=".74" stop-color="#A37A2C"/>
|
||
<stop offset="1" stop-color="#6E501A"/>
|
||
</linearGradient> */
|
||
```
|
||
|
||
Gradient directions are fixed (135° strokes, 100° text, 90° hairlines) so every gold element reads as lit from top-left — that consistency is what makes it metal instead of a web gradient.
|
||
|
||
### 2.3 Theme mechanics
|
||
|
||
- Every `<section>` carries `data-theme="ink"` or `data-theme="ivory"`. All colours of text, numerals, eyebrows, hairlines, links, buttons, focus rings and the header are selected via `[data-theme]` — static, no JS.
|
||
- `<body>` carries `--bg` and `--fg`. One GSAP ScrollTrigger per boundary (start `top 70%`, end `top 30%`, scrub 0.4) tweens `--bg`/`--fg` between `--ink` and `--ivory`. That is the whole "breathing" effect. Sections themselves have `background: transparent`; only the body paints.
|
||
- At each boundary a 1 px hairline (`--gold-hairline` entering ink, `--gold-hairline-light` entering ivory) draws `scaleX 0→1` from the left (0.9 s, expo-out) when it enters the viewport — "a sheet being laid on".
|
||
- Paper grain: static SVG `feTurbulence` (baseFrequency .8, 2 octaves) as a fixed pseudo-layer, opacity .05 on ivory / .07 on ink, `mix-blend-mode: overlay` only on desktop fine-pointer, plain opacity on touch. No canvas.
|
||
|
||
### 2.4 Section rhythm
|
||
|
||
**Homepage:** Hero (ink) → Positionierung (ivory) → Leistungen (ivory) → Das WOLF-Prinzip (ink) → Über Anelia (ivory) → Für wen + Termine (ivory, Termine block on bone) → Kontakt + Footer (ink).
|
||
**Service pages:** Hero (ink, 60svh) → all content (ivory, Rahmen/Termine blocks on bone) → Kontakt band + Footer (ink).
|
||
**Impressum/Datenschutz:** ivory only, ink text; gold appears only in the footer wordmark rule.
|
||
**404:** ink.
|
||
|
||
Gold budget: ≤ ~5 % of any viewport. Seven jobs only — wolf stroke, hairlines, eyebrows, numerals, arrow glyphs (→ ↗, the only "icons" on the site), link underlines/hover, focus rings. No gold fills, no glows, no shadows, no gold on photos, no gold for error/status states.
|
||
|
||
---
|
||
|
||
## 3. Typography
|
||
|
||
### 3.1 Families (`src/app/fonts.ts`, `next/font/local`, woff2 committed under `src/app/fonts/`)
|
||
|
||
| Role | Family | Files | Notes |
|
||
|---|---|---|---|
|
||
| Display | Cormorant Garamond | 300, 400, 400 Italic | `--font-display`. Only ≥ 24 px; display ≥ 40 px; body never. |
|
||
| Text, labels, wordmark | Jost (variable 100–900) | 1 file | `--font-sans`. Futura genome = the logo's letterforms. |
|
||
| Meta | DM Mono | 400 | `--font-mono`. Tabular numerals, `font-variant-numeric: tabular-nums`. |
|
||
|
||
Subset: latin + latin-ext (ä ö ü ß „“ – ·). Preload: Cormorant 300 + Jost. `display: 'swap'`, `adjustFontFallback: true`. Verify after build: `out/_next/static/media/*.woff2` present, zero requests to `fonts.googleapis.com` / `gstatic.com`. Remove `Geist`/`Geist_Mono` from `layout.tsx`.
|
||
|
||
### 3.2 Scale (tokens in `@theme`, all fluid, no breakpoint jumps)
|
||
|
||
| Style | Family / weight | Size | Leading / tracking / notes |
|
||
|---|---|---|---|
|
||
| H1 hero | Cormorant 300 | `clamp(3rem, 1.4rem + 7.4vw, 9.5rem)` (48→152 px) | lh 0.94, ls −0.015em, max-width 12ch, `text-wrap: balance`, one word in 400 Italic. Colour `--ivory`. |
|
||
| H1 service page | Cormorant 300 | `clamp(2.75rem, 1.4rem + 5.4vw, 7rem)` | lh 0.96, max 14ch, one italic word. |
|
||
| H2 section | Cormorant 300 on ink / **400 on ivory** | `clamp(2.25rem, 1.4rem + 3.2vw, 4.75rem)` (36→76 px) | lh 1.02, ls −0.01em, max 16ch. |
|
||
| H3 ledger / block title | Cormorant 400 | `clamp(1.5rem, 1.3rem + 0.8vw, 2.125rem)` | lh 1.15. |
|
||
| Section numeral | Cormorant 300 | `clamp(4rem, 2rem + 8vw, 10rem)` | lh 0.9, `lining-nums`. `.gold-text` on ink, flat `--gold-700` on ivory. |
|
||
| Formula line | Cormorant 300 | `clamp(2.5rem, 1.2rem + 5.4vw, 7.5rem)` | lh 1.0. |
|
||
| Quote | Cormorant 400 Italic | `clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem)` | lh 1.25, hanging „ via `text-indent: -0.4em`. |
|
||
| Editorial paragraph (Positionierung) | Cormorant 300 | `clamp(1.625rem, 1.2rem + 2vw, 3rem)` | lh 1.25. |
|
||
| Lead | Jost 300 | `clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)` | lh 1.45, max 38ch. |
|
||
| Body | Jost 400 | `clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem)` (17→18 px) | lh 1.6, max-width 36rem (~62ch), paragraph gap 1.25em, `hyphens: auto` (lang="de"). |
|
||
| Eyebrow | Jost 500 | 0.72rem (11.5 px) | uppercase, ls 0.28em, lh 1; preceded by a 24×1 px gold tick (`::before`). `--gold` on ink / `--gold-deep` on ivory. |
|
||
| Nav | Jost 400 | 0.8125rem | uppercase, ls 0.16em. |
|
||
| Button | Jost 500 | 0.8125rem | uppercase, ls 0.2em, padding 1.05em 2.1em, 1 px border, radius 0. |
|
||
| Wordmark name | Jost 300 (350 via axis if the logo looks heavier) | nav 1.0625rem / footer `clamp(1.5rem, 1rem + 2vw, 2.75rem)` | uppercase, ls 0.32em, `padding-left: 0.32em` (optical centring). |
|
||
| Wordmark sub | Jost 400 | 0.5em of name | uppercase, ls 0.22em; reduce to 0.18em if wider than the name, never shrink the name. |
|
||
| Meta / mono | DM Mono 400 | 0.75rem (12 px) | ls 0.06em, tabular-nums. Folio, marginalia, ledger keywords, phone, dates, formats. |
|
||
| Small caps names | Cormorant 500 | inherits | `font-feature-settings: "smcp" 1`, ls 0.08em. |
|
||
|
||
Micro-typography: German quotes „…“, en-dashes with spaces, no bold anywhere, `-webkit-font-smoothing: antialiased` on ink, Cormorant never below 24 px, H1 never below 40 px, max one italic word per headline, emphasis is always italic never colour, exactly one `.gold-text` word per page.
|
||
|
||
---
|
||
|
||
## 4. Motion system
|
||
|
||
### 4.1 Principle
|
||
|
||
Everything moves like type being laid on paper: clip-path masks, hairlines that draw, lines that rise out of a mask, a sheet that turns. No scale on hover, no bounce, no blur on paragraphs, no autoplay marquee, no cursor replacement.
|
||
|
||
### 4.2 Easings & durations
|
||
|
||
- Enter: `[0.22, 1, 0.36, 1]` (expo-out). Curtain/wipes: `power3.inOut`. Scrubbed: `none`.
|
||
- Hairline `scaleX`: 0.9 s. Line reveal: 0.9 s, stagger 0.08 s. Block fade (`opacity 0→1, y 16→0`): 0.6 s, stagger 0.06. Wolf draw: 1.2 s. Wolf sheen: 0.8 s, once. Door mask (photos): 1.1 s. Umblättern: 0.45 s in + 0.6 s enter + 0.45 s out ≤ 900 ms total. Hover states: 0.3–0.35 s. Nothing over 1.2 s except scrubbed.
|
||
|
||
### 4.3 Primitives (exactly five, site-wide; nothing else is invented per section)
|
||
|
||
1. `<Rule/>` — 1 px hairline, `transform-origin: left`, `scaleX 0→1` at in-view (`top 85%`, once). Accepts `origin="x"` so the hero folio line can draw outward from the wolf handoff point.
|
||
2. `<Lines/>` — React Bits SplitText (`type: 'lines', mask: 'lines', autoSplit: true`, waits on `document.fonts.ready`), each line `yPercent 100→0`, start `top 82%`, once.
|
||
3. `<Reveal/>` — motion `whileInView`, `opacity 0→1, y 16→0`, `staggerChildren 0.06`, `viewport={{ once: true, margin: '-10%' }}`. Used for ledger rows, paragraphs, columns.
|
||
4. `<Draw/>` — `motion.path` `pathLength 0→1` (or GSAP DrawSVG when scrubbed), gradient stroke, `vector-effect: non-scaling-stroke`.
|
||
5. `<Door/>` — image mask `clip-path: inset(100% 0 0 0) → inset(0)`, 1.1 s, image `scale 1.06→1`; optional 6 % parallax (`yPercent -6→6`, scrub 0.6, desktop only).
|
||
|
||
### 4.4 Scroll choreography (Lenis + GSAP)
|
||
|
||
- Lenis: `lerp 0.1`, `autoRaf: false`, driven by `gsap.ticker` (`lagSmoothing(0)`), `syncTouch: false`, `smoothWheel: !reducedMotion`, `anchors: { offset: -80 }`. One `ReactLenis root` in `layout.tsx`, never in `template.tsx`. `useLenis(() => ScrollTrigger.update())`.
|
||
- `ScrollTrigger.config({ ignoreMobileResize: true })`. Refresh after: template enter complete, hero image `onLoad`, overlay menu close.
|
||
- Hero: portrait `y +8 %` parallax (scrub 0.6); headline lines `−6 / −3 / 0 %` (scrub); after 80 px the header gets the current `--bg` at 92 % + 1 px hairline.
|
||
- Section numerals: CSS `position: sticky; top: calc(50vh - .45em)` — no JS.
|
||
- Body ground tween at every boundary (see §2.3).
|
||
- Positionierung paragraph: React Bits ScrollReveal (word opacity 10 %→100 %, `enableBlur: false`, `baseRotation: 1`), desktop ≥ 1024 only; mobile uses `<Lines/>` once.
|
||
- Das WOLF-Prinzip: the **only pin** (300vh, desktop ≥ 1024 and no-preference only). Mobile and reduced-motion: stacked flow with `<Lines/>`, wolf drawn once at `top 80%`.
|
||
- Folio counter: one ScrollTrigger per section (`start: 'top 50%'`, `onEnter/onLeaveBack`) writes `01 / 06`. Magic UI Scroll Progress restyled as a 1 px `--gold` line under the header.
|
||
- Hover (`pointer: fine` only): ledger row = hairline recolours from the left + title crossfades to italic + arrow `translateX 8px`; button = gold fill 0.35 s + mono suffix slides out of a mask; text links = underline grows from the left (`background-size 0→100%`, 0.4 s). Optional React Bits Magnet (strength 3) on the 3–4 primary CTAs only.
|
||
|
||
### 4.5 Page transition ("Umblättern")
|
||
|
||
`TransitionLink` (wraps `next/link`, `scroll={false}`, lets Cmd/Ctrl/Shift/middle clicks through, ignores double clicks via a global `isTransitioning` flag):
|
||
|
||
1. Close the overlay menu if open (`lenis.start()`).
|
||
2. A fixed ivory sheet (`#curtain`, `translateY(100%)`, 1 px `--gold-hairline-light` at its top edge, monogram 48 px centred) slides up 0.45 s `power3.inOut`. For 400 ms the sheet shows the destination name in DM Mono 12 px `--gold-deep`: „Trainings & Workshops“.
|
||
3. `router.push(href)`; Lenis `scrollTo(0, { immediate: true, force: true })` on pathname change.
|
||
4. `template.tsx`: `motion.main` `opacity 0→1, y 16→0`, 0.6 s; `onAnimationComplete` → `ScrollTrigger.refresh()`.
|
||
5. Sheet continues upward (`yPercent −200`, 0.45 s) and resets. Hard fallback: if the route hasn't changed after 900 ms, navigate anyway.
|
||
|
||
The gold edge of the sheet becomes the first hairline of the new page's masthead — one line through the whole site, achieved without measuring anything.
|
||
|
||
### 4.6 Reduced motion & touch
|
||
|
||
- `<MotionConfig reducedMotion="user">` at the root; `gsap.matchMedia` with `reduce`, `ok`, `desktop` conditions.
|
||
- Reduce: all end states immediate, no pin, no curtain (direct `router.push`, 200 ms fade), wolf fully drawn, no sheen, no ScrollReveal, Lenis `smoothWheel: false`, no parallax, no Magnet.
|
||
- Touch (`pointer: coarse`): native scroll, no hover reveals (all content visible anyway), no Magnet, grain without blend mode.
|
||
- Keyboard: every ledger row is a single `<a>`; focus ring 2 px `--gold` (ink) / `--gold-deep` (ivory), offset 4 px. Skip link „Zum Inhalt“ first in DOM.
|
||
|
||
---
|
||
|
||
## 5. Global components
|
||
|
||
### 5.1 Header (fixed, 72 px desktop / 60 px mobile)
|
||
|
||
Grid 12, page margin `clamp(20px, 5vw, 80px)`, max-width 1680 px.
|
||
|
||
- **Left (cols 1–3):** Monogram SVG 28 px (static, gradient stroke; one-time sheen on hover) + HTML wordmark „ANELIA WOLF“ (Jost 300, 1.0625rem, ls 0.32em); sub-line hidden < 1024 px. One `<a href="/">` with `aria-label="Anelia Wolf – Startseite"`.
|
||
- **Centre (cols 4–9, ≥ 1024 px):** three links „Coaching & Analysen“ · „Trainings & Workshops“ · „Keynotes & Speaking“ (Jost 400 13 px caps). Active page: 1 px gold underline. Hover: underline grows from left.
|
||
- **Right (cols 10–12):** text link „Kontakt“ (`/#kontakt`, Lenis anchor, offset −80) + outline button „Kennenlerngespräch anfragen“ (≥ 1280 px; below that only „Kontakt“) + „Menü“ trigger (< 1024 px; Jost 500 13 px caps + DM Mono glyph `+` → `×`).
|
||
- States: transparent over the hero; after 80 px, ground = current section ground at 92 % (`[data-theme]`) + 1 px hairline (`--line-dark` / `--line-light`), no blur except the header's own `backdrop-filter: blur(8px)` (the only blur in the UI). Below the header: 1 px gold scroll-progress line.
|
||
|
||
### 5.2 Overlay menu („Menü“)
|
||
|
||
Ivory sheet from the top (`translateY −100%→0`, 0.5 s, `power3.inOut`), `data-lenis-prevent`, `lenis.stop()`, focus trap, Escape closes, closes on route change. Content: numbered ledger — `01 Coaching & Analysen`, `02 Trainings & Workshops`, `03 Keynotes & Speaking`, `04 Über Anelia` (`/#ueber`), `05 Kontakt` (`/#kontakt`) in Cormorant 300 `clamp(2rem, 1.4rem + 3vw, 4rem)` `--ink`, numerals DM Mono `--gold-deep`, rows hairline-separated, staggered out of clip masks (0.06). Bottom: phone as `tel:` link in Cormorant 24 px, e-mail, „LinkedIn ↗“, „Impressum · Datenschutz“ in mono. Custom build with `motion`, not React Bits StaggeredMenu.
|
||
|
||
### 5.3 Footer (identical on every page incl. 404)
|
||
|
||
Ink. Top: `--gold-hairline` full width (the last `<Rule/>` of every page, 1.2 s).
|
||
Grid 12: cols 1–6 monogram 40 px + wordmark at footer size (name ivory, rule gold, sub-line `--gold`); cols 7–9 „Inhalt“ column (DM Mono 11 px caps `--grey-warm` heading, Jost 400 14 px links: Coaching & Analysen / Trainings & Workshops / Keynotes & Speaking / Über Anelia / Kontakt); cols 10–12 „Kontakt“ column: `info@anelia-wolf.com`, `+49 174 4555115`, „LinkedIn ↗“, „herCAREER Expo 2026 ↗“ (text link, no logo).
|
||
Bottom row (1 px `--line-dark` above, 48 px): left DM Mono 11 px „© 2026 Anelia Wolf · Sales Mentoring & Potential Development“; centre „Impressum · Datenschutz“ (text links); right „Unlock Your Potential — Next Level“ Jost 500 11 px caps ls 0.28em `--gold`.
|
||
No social icons, no newsletter, no agency credit (Impressum Bildnachweis only).
|
||
|
||
### 5.4 Cursor
|
||
|
||
Native cursor, always. No replacement, no spotlight. The only pointer-reactive effects: ledger hover, button fill + suffix, link underline, optional Magnet on primary CTAs. All under `(pointer: fine)` and no-preference.
|
||
|
||
### 5.5 Logo treatment
|
||
|
||
- Source: `public/brand/logo-mark.svg` as **true stroke paths** (not filled outlines): `path#v-left`, `path#v-right` (stroke `--ivory` on ink / `--ink` on ivory, width 1.5), `path#wolf` (one continuous path, stroke `url(#wolf-gold)`, width 1.25, ends at the neck), plus `path#handoff` (short segment from the neck downward, same stroke; only rendered in the hero). `fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke`. If only a PNG exists: trace in Figma/Illustrator (~1 h), path order left V → right V → wolf, wolf path direction ending at the neck.
|
||
- React component `<Monogram size stroke draw sheen theme />`.
|
||
- Draw sequence (hero, once): left V 0–0.35 s, right V 0.25–0.6 s, wolf 0.5–1.2 s (`power2.inOut`), handoff 1.2–1.4 s, then a one-time sheen: second `path#wolf` layer, stroke `#F4E5B8`, `stroke-dasharray: 12 200`, dashoffset tween across the path in 0.8 s (light over metal). Header monogram plays the sheen once on hover.
|
||
- Sizes: header 28 px; hero 28vh (with photo) / 56vh (without); Prinzip 28vh scrubbed; curtain 48 px; footer 40 px; 404 40vh (V strokes only, wolf missing); favicon = wolf head alone, gold on ink, 32/180/512 px + SVG.
|
||
- Rules: never filled, never glowing, never mirrored (faces right, into reading direction), never below 24 px, never a preloader, never longer than 1.2 s.
|
||
- Wordmark: always HTML (`<a class="wordmark">` with `__name`, `__rule`, `__sub`), rule uses `--gold-hairline` / `--gold-hairline-light`. `logo-full.png` is used only for OpenGraph.
|
||
|
||
---
|
||
|
||
## 6. Homepage
|
||
|
||
Route `/`. Grid: 12 columns, gutter `clamp(16px, 2vw, 32px)`, page margin `clamp(20px, 5vw, 80px)`, max-width 1680 px. Section numerals sit in cols 1–2 (sticky); content in cols 3–9; marginalia in cols 10–12. On < 1024 px the numeral becomes a mono line above the eyebrow and everything is single column.
|
||
|
||
### 6.1 `#hero` — Cover (ink)
|
||
|
||
**Purpose.** Answer who / what / for whom in three seconds, and set the "who built this?" moment using her own logo: the drawn wolf whose neck becomes the page's first line.
|
||
|
||
**Layout.** `min-height: 100svh`. Rows: `[Mastkopf auto][1fr][H1 auto][Subline + CTA auto][Folio auto]`.
|
||
- **Mastkopf** (below the header, padding-top 96 px): hairline above and below (`--gold-hairline`), 44 px row, three slots — left Jost 500 11.5 px caps ls 0.28em `--gold` „Keynote Speakerin · Trainerin · Coach“; centre same style `--grey-warm` „Sales Mentoring & Potential Development“; right DM Mono 12 px `--grey-warm` „Deutsch & Englisch“. Mobile: two rows (role / language).
|
||
- **Portrait — Variant A (≥ 1 photo):** cols 8–12, negative margin-right to the viewport edge, height from Mastkopf to folio hairline, `object-fit: cover`, warm grade (see §9), scrims: top third `linear-gradient(var(--ink) 0%, transparent 45%)` and left edge `linear-gradient(90deg, var(--ink) 0%, rgba(15,14,12,.72) 30%, transparent 60%)`. z-index 0. Caption DM Mono 11 px bottom-right inside the image: „Anelia Wolf · Foto: [Name]“.
|
||
- **Monogram — Variant A:** 28vh, cols 6–8, bottom-aligned to the folio hairline, overlapping the portrait's left edge by ~80 px, z-index 1 (over the photo, under the headline). Its neck ends at the bottom-left; `path#handoff` runs straight down to the folio hairline; the folio `<Rule origin="x">` draws outward from that x in both directions.
|
||
- **Monogram — Variant B (0 photos):** 56vh, cols 7–12, right-aligned, same handoff.
|
||
- **H1:** cols 1–10 (cols 1–8 below 1280 px), z-index 2, `align-self: end`, „wirkst“ in 400 Italic.
|
||
- **Subline + CTA:** cols 1–5, margin-top 40 px; below it (margin-top 32 px, flex, gap 32 px) the outline button + text link; micro-copy under the button in DM Mono 11 px.
|
||
- **Folio:** hairline, then a 40 px row: left DM Mono `01 / 06`, right „Positionierung ↓“ as an anchor link to `#positionierung`.
|
||
- Mobile (< 768 px): Mastkopf two rows; monogram 22vh above the H1 (no handoff); portrait as a full-width 3:4 block under the CTAs (max-height 48svh); H1 48–64 px.
|
||
|
||
**Copy.**
|
||
- Mastkopf: „Keynote Speakerin · Trainerin · Coach“ | „Sales Mentoring & Potential Development“ | „Deutsch & Englisch“
|
||
- H1: **„Wer du bist, entscheidet, wie du *wirkst*.“**
|
||
- Subline: „Persönlichkeitsanalysen, 1:1 Coaching, B2B-Vertriebstrainings und Keynotes nach dem WOLF-Prinzip. Für Menschen, die wissen wollen, wer sie sind, wo sie stehen und wo sie hinwollen.“
|
||
- Primary CTA: „Kennenlerngespräch anfragen“ (`mailto:info@anelia-wolf.com?subject=Kennenlerngespräch`); hover suffix (desktop, slides out of a mask inside the button): „( 30 Min · kostenfrei )“
|
||
- Micro-copy: „Telefonisch oder online · Deutsch oder Englisch“
|
||
- Text link: „Zu den Keynotes →“ (`/leistungen/keynotes/`)
|
||
- Folio: „01 / 06“ · „Positionierung ↓“
|
||
- Alt text: „Anelia Wolf, Keynote Speakerin, Trainerin und Coach“
|
||
|
||
**Motion (load, GSAP timeline, no preloader, starts on `fonts.ready` or 1.5 s).** 0.00 s upper Mastkopf hairline `scaleX` (0.9 s) · 0.15 s Mastkopf slots `opacity/y 8` (0.6 s, stagger 0.08) · 0.30 s H1 lines out of masks (0.9 s, stagger 0.09) · 0.50 s portrait `<Door/>` (1.1 s) · 0.70 s monogram draw: left V, right V, wolf, handoff (1.4 s total) · 1.30 s folio hairline draws outward from the handoff x (0.9 s) + folio text · 1.50 s wolf sheen (0.8 s) · 1.20 s subline + CTA (0.6 s). Scroll: portrait `y +8 %`, H1 lines `−6/−3/0 %`. Reduced motion: all end states.
|
||
|
||
**Components.** Custom `Hero` (server component + `'use client'` timeline via `useGSAP`), React Bits SplitText, `<Monogram draw sheen>`, `<Door/>`, `<Rule/>`, Magic UI Scroll Progress (restyled), optional Magnet on the CTA.
|
||
|
||
### 6.2 `#positionierung` — 01 (ivory)
|
||
|
||
**Purpose.** Her own sentence and her three questions as the method. Gives the whole site its spine (the questions return on the coaching page).
|
||
|
||
**Layout.** Boundary tween ink→ivory + `--gold-hairline-light`. `padding-block: clamp(112px, 16vh, 224px)`. Numeral „01“ cols 1–2 sticky, `--gold-700`. Eyebrow + H2 cols 3–9. Editorial paragraph cols 3–9, margin-top 48 px. Three question rows cols 3–9: DM Mono `01/02/03` `--gold-deep` + Cormorant 400 Italic 32 px, hairline-separated, padding-block 20 px. Signature quote cols 4–9, margin-top 64 px, Jost 300 20 px `--grey-deep` with a 24 px gold tick. Marginalia cols 10–12, sticky top 30vh, DM Mono 12 px `--grey-deep`, gold ticks. Mobile: marginalia becomes a mono block under the quote.
|
||
|
||
**Copy.**
|
||
- Eyebrow: „Positionierung“
|
||
- H2: **„Drei Fragen. Ein Prinzip.“**
|
||
- Paragraph: „Wer bist du? Wo stehst du? Wo willst du hin? Diese drei Fragen stelle ich jedem Menschen, mit dem ich arbeite – im Coaching, im Training, vor jeder Keynote. Die Antworten sind der Anfang. Danach geht es um Wirkung: souverän auftreten, klar positioniert sein, im Vertrieb mehr erreichen.“
|
||
- Rows: „01 · Wer bist du? — Persönlichkeits- & Verhaltensanalyse“ / „02 · Wo stehst du? — Positionierung im Coaching“ / „03 · Wo willst du hin? — Umsetzung in Training, Coaching oder Keynote“
|
||
- Signature: „Als Keynote Speakerin, Trainerin und Coach begleite ich Menschen und Unternehmen dabei, ihr volles Potenzial zu entfalten.“ — Anelia Wolf
|
||
- Marginalia: „Praxis: B2B-Außendienst“ · „Sprachen: Deutsch, Englisch“ · „Bühne: herCAREER Expo 2026, München“
|
||
|
||
**Motion.** Boundary hairline; eyebrow + H2 `<Lines/>`; paragraph ScrollReveal (desktop) / `<Lines/>` (mobile); rows `<Reveal/>` stagger 0.1 with hairline `scaleX`; marginalia fade. Folio → `02 / 06`.
|
||
|
||
**Components.** ScrollReveal, SplitText, `<Rule/>`, `<Reveal/>`, `<Numeral/>` (CSS sticky), `<Marginalia/>`.
|
||
|
||
### 6.3 `#leistungen` — 02 (ivory)
|
||
|
||
**Purpose.** The three services as a table of contents that is also the navigation. Three doors with specific links.
|
||
|
||
**Layout.** No boundary; `--line-light` hairline as separator. `padding-block: clamp(96px, 14vh, 192px)`. Numeral „02“ sticky. Eyebrow + H2 cols 3–8. Ledger cols 3–12, margin-top 64 px: three rows, each one `<TransitionLink>` as a 12-subcolumn grid: [numeral DM Mono 12 px `--gold-deep`, sub 1] [title Cormorant 400 `clamp(1.75rem, 1.4rem + 1.6vw, 3rem)` `--ink`, sub 2–5, roman/italic stacked layers] [one-liner Jost 400 17 px `--ink` + keywords DM Mono 12 px `--grey-deep` separated by ` · ` — **always visible**, sub 6–10] [link Jost 500 13 px caps ls 0.2em `--gold-deep` + `→`, sub 11–12, right]. Rows padding-block 40 px, 1 px `--line-light` above/below. Hover: ground `--bone` 0.3 s, lower hairline recolours to `--gold-hairline-light` (`scaleX` from left, 0.6 s), title crossfades to italic, arrow +8 px. Focus: 2 px `--gold-deep` outline, offset 4 px. Mobile: three stacked lines per row (numeral + title / one-liner + keywords / link), padding 28 px.
|
||
|
||
**Copy.**
|
||
- Eyebrow: „Leistungen“
|
||
- H2: **„Coaching. Training. Bühne.“**
|
||
- Row 01: „01“ · „Coaching & Analysen“ · „Wer bist du – und wer kannst du sein?“ · „Persönlichkeits- & Verhaltensanalyse · 1:1 Coaching · Positionierung & Neuorientierung“ · „Zum Coaching →“ (`/leistungen/coaching/`)
|
||
- Row 02: „02“ · „Trainings & Workshops“ · „Vertrieb mit Persönlichkeit – für Teams und Führungskräfte.“ · „B2B-Vertriebstraining · Neukunden & Bestandskunden · Leadership & Teamdynamik“ · „Zu den Trainings →“ (`/leistungen/trainings/`)
|
||
- Row 03: „03“ · „Keynotes & Speaking“ · „Mut zum Erfolg. Das WOLF-Prinzip auf der Bühne.“ · „Firmen-Events & Kongresse · 20–60 Minuten · Deutsch & Englisch“ · „Zu den Keynotes →“ (`/leistungen/keynotes/`)
|
||
|
||
**Motion.** H2 `<Lines/>`; rows `<Reveal/>` stagger 0.12, each with its upper hairline `scaleX`. Click → Umblättern.
|
||
|
||
**Components.** Custom `<Ledger variant="toc">`, `TransitionLink`, SplitText. (React Bits FlowingMenu rejected — marquee images are an agency trope.)
|
||
|
||
### 6.4 `#prinzip` — 03 (ink, the only pin)
|
||
|
||
**Purpose.** The WOLF-Prinzip as a typeset formula: three parts, two sentences each, which service delivers which. The page's one gold moment.
|
||
|
||
**Layout.** Boundary tween ivory→ink + `--gold-hairline`. Desktop: section 300vh, inner container `sticky top 0`, `height 100svh`, grid 12. Numeral „03“ cols 1–2 `.gold-text`. Eyebrow cols 3–9 (padding-top 128 px) `--gold`. Formula block cols 3–9, vertically centred: three lines Cormorant 300 formula size, ivory; operators `+` / `=` in DM Mono 0.5em `--gold` before lines 2 and 3; „Erfolg“ is the page's single `.gold-text` word. Right of each line (cols 9–12, aligned to the line): definition Jost 300 18 px `--grey-warm` max 30ch + DM Mono 12 px `--gold` „Liefert: …“. Monogram cols 10–12 bottom-right, 28vh, scrubbed draw. Sign-off bottom-left cols 3–9 (padding-bottom 64 px): Jost 500 11.5 px caps ls 0.28em `--gold`. Mobile/tablet (< 1024) and reduced motion: no pin, natural flow, definition under each line, monogram 40vw at the end, drawn once.
|
||
|
||
**Copy.**
|
||
- Eyebrow: „Das WOLF-Prinzip“
|
||
- Line 1: „Starke Persönlichkeit“ — „Du weißt, wer du bist und was dich antreibt. Die Analyse macht es sichtbar, das Coaching macht es nutzbar.“ — „Liefert: Coaching & Analysen“
|
||
- Line 2: „+ Souveräne Wirkung“ — „Du sagst klar, was du kannst und was du willst – im Kundengespräch, im Team, auf der Bühne.“ — „Liefert: Coaching, Trainings & Keynotes“
|
||
- Line 3: „= Maximaler *Erfolg*“ („Erfolg“ `.gold-text`) — „Das Ergebnis, wenn Persönlichkeit und Wirkung zusammenkommen: Neukunden, die bleiben. Bestandskunden, die wachsen. Entscheidungen, die du selbst triffst.“ — „Liefert: Trainings & Workshops“
|
||
- Sign-off: „Unlock Your Potential — Next Level“
|
||
- Text link under the sign-off: „Das WOLF-Prinzip auf der Bühne →“ (`/leistungen/keynotes/`)
|
||
|
||
**Motion.** ScrollTrigger pin (desktop, no-preference), scrub 0.4, reversible: 0–15 % eyebrow + numeral; 20 % line 1 `clip-path inset(0 0 100% 0)→0` + definition fade; 45 % line 2 + `+` glyph; 70 % line 3 + `=` glyph + one sheen over „Erfolg“ (`background-position 0→100%`, 1.2 s, once); 70–95 % wolf `pathLength 0→1` scrubbed; 95 % sign-off. No bounce, no scale.
|
||
|
||
**Components.** GSAP ScrollTrigger pin + timeline in `useGSAP` with `gsap.matchMedia`, `<Draw scrub>` (DrawSVG), custom `<Formula/>`. Aceternity Sticky Scroll Reveal rejected (nested scroller).
|
||
|
||
### 6.5 `#ueber` — 04 (ivory)
|
||
|
||
**Purpose.** Prove the practitioner: first person, a portrait that stays in view while reading, a Werdegang as a ledger, marginalia with verifiable facts. No counters, no logos.
|
||
|
||
**Layout.** Boundary tween ink→ivory + `--gold-hairline-light`. `padding-block: clamp(112px, 16vh, 224px)`. Numeral „04“ sticky `--gold-700`. Portrait (photo 2, or photo 1 in a tighter crop) cols 3–6, aspect 4:5, `<Door/>`, 1 px `--line-light` frame, caption DM Mono 11 px `--grey-deep` with gold tick, `sticky top 120px`. Text cols 7–12: eyebrow, H2 Cormorant 400 (max 14ch), body Jost 400 18 px `--ink` max 36rem, two paragraphs. Werdegang ledger cols 7–12, margin-top 64 px: five rows [keyword DM Mono 12 px caps `--gold-deep`, 25 %] [description Jost 400 17 px `--ink`, 75 %], `--line-light` separators, padding-block 18 px. Without a photo: text cols 3–8, ledger cols 3–9, monogram 24vh as a quiet vignette in cols 10–12 (`--gold-deep` stroke). Marginalia cols 10–12 only when the photo is present (otherwise under the ledger). Mobile: photo full width 4:5 max-height 60svh, then text, then ledger.
|
||
|
||
**Copy.**
|
||
- Eyebrow: „Über Anelia“
|
||
- H2: **„Ich stehe selbst im Vertrieb. Jede Woche.“**
|
||
- P1: „Mein Vater war Händler. Ich habe früh gesehen, wie ein Gespräch eine Entscheidung verändert – und dass Menschen von Menschen kaufen. Später kam die Ausbildung zur Zahntechnikerin, die Abteilungsleitung, dann Verkauf und Store Management im Premium-Segment.“
|
||
- P2: „Heute arbeite ich im B2B-Außendienst: Kaltakquise, Neukunden, Bestandskunden. Parallel begleite ich Menschen und Teams als Coach, Trainerin und Keynote Speakerin – auf Deutsch und Englisch. Was ich weitergebe, habe ich in der Woche davor selbst gemacht. Und zu Hause trainieren mich zwei sechzehnjährige Zwillinge täglich in Verhandlungsführung.“
|
||
- Werdegang: „Prägung — Verkaufsgespräche im Betrieb meines Vaters“ / „Präzision — Zahntechnikerin, Abteilungsleiterin“ / „Premium — Verkauf & Store Management im Premium-Segment“ / „B2B — Außendienst: Kaltakquise, Neu- & Bestandskunden“ / „Bühne — Keynote Speakerin, Trainerin & Coach · herCAREER Expo 2026“
|
||
- Caption: „Anelia Wolf · Foto: [Name der Fotografin]“
|
||
- Marginalia: „Trainerin für Persönlichkeit, Wirkung & Vertrieb“ · „LinkedIn ↗“ (`linkedin.com/in/anelia-wolf-a26071280`, `rel="noopener"`) · „Deutsch · Englisch“
|
||
|
||
*(„Medizinprodukte“ and the Zwillinge line ship only after client approval — §12.)*
|
||
|
||
**Motion.** Portrait `<Door/>` at `top 85%`, 6 % parallax; H2 `<Lines/>`; paragraphs `<Reveal/>`; ledger rows `<Reveal/>` stagger 0.08 + hairline `scaleX`; marginalia fade.
|
||
|
||
**Components.** `next/image` (unoptimized, two pre-generated widths), `<Ledger variant="werdegang">`, `<Door sticky>`, SplitText, `<Reveal/>`, `<Rule/>`. No TiltedCard / DecayCard — a magazine portrait does not move.
|
||
|
||
### 6.6 `#fuer-wen` — 05 (ivory, Termine on bone)
|
||
|
||
**Purpose.** Replaces the empty testimonial slot with a sharp audience definition and a verifiable dates ledger. Gets a „Stimmen“ row the day approved quotes exist.
|
||
|
||
**Layout.** `--line-light` separator. `padding-block: clamp(96px, 14vh, 192px)`. Numeral „05“ sticky. Eyebrow + H2 cols 3–9. Three columns cols 3–12, margin-top 64 px, `grid-template-columns: repeat(3, 1fr)`, gap 48 px; the middle column is offset 48 px downward (deliberate asymmetry). Per column: DM Mono 12 px `--gold-deep` label, Cormorant 400 28 px title, three Jost 400 17 px lines separated by 1 px `--line-light` (no bullets, no icons), a specific text link. Termine block cols 3–12, margin-top 96 px, ground `--bone`, padding 40 px, 1 px `--line-light` frame: heading DM Mono 12 px caps `--gold-deep` „Termine“ with a static 6 px gold dot (no pulse), two rows [date DM Mono 13 px tabular `--ink`, 20 %] [format Jost 500 13 px caps `--grey-deep`, 20 %] [title Cormorant 400 24 px `--ink`, 40 %] [venue DM Mono 12 px `--grey-deep`, 20 %], each row a link to the herCAREER page. Stimmen (only with approval): under the ledger, cols 4–11, Cormorant 400 Italic quote size, name in small caps, role in mono — max three, stacked, no carousel, no stars, no avatars. Mobile: columns stack, rows two lines.
|
||
|
||
**Copy.**
|
||
- Eyebrow: „Für wen“
|
||
- H2: **„Für wen ich arbeite.“**
|
||
- Col 1: „Unternehmen“ — „Vertriebsteams & Führungskräfte“ — „Neukundengewinnung, die planbar wird“ / „Bestandskunden, die wachsen statt abwandern“ / „Führung und Teamdynamik im Vertrieb“ — „Zu den Trainings →“
|
||
- Col 2: „Einzelpersonen“ — „Fach- & Führungskräfte, Frauen in der Neuorientierung“ — „Souverän auftreten und überzeugen“ / „Wissen, wofür du stehst – und es sagen“ / „Beruflich neu ausrichten, ohne dich zu verbiegen“ — „Zum Coaching →“
|
||
- Col 3: „Veranstalter“ — „Firmen-Events, Kongresse, Karriere-Formate“ — „Keynote nach dem WOLF-Prinzip, 20–60 Minuten“ / „Deutsch oder Englisch, live oder online“ / „Ein Impuls, der nachwirkt“ — „Zu den Keynotes →“
|
||
- Termine: „23.10.2026 · 10:30“ | „Keynote“ | „Das WOLF-Prinzip – Mut zum Erfolg!“ | „herCAREER Expo, MOC München, Auditorium 2“ // „22.–23.10.2026“ | „Ausstellerin“ | „Trainerin für Persönlichkeit, Wirkung & Vertrieb“ | „herCAREER Expo, Halle 3, Stand P.10.2“
|
||
|
||
**Motion.** H2 `<Lines/>`; columns `<Reveal/>` stagger 0.12 with inner hairlines; Termine frame: top hairline draws, then rows fade. Hover only on text links.
|
||
|
||
**Components.** Custom `<Columns/>`, `<Ledger variant="termine">`, SplitText, `<Reveal/>`; `<Quote/>` ready for Stimmen. Aceternity Animated Testimonials explicitly not used.
|
||
|
||
### 6.7 `#kontakt` — 06 (ink) + Footer
|
||
|
||
**Purpose.** One path, one CTA. The three-step process lowers the hurdle; then phone, mail, LinkedIn — no form, no third parties, minimal Datenschutz. Ends with the wordmark as colophon.
|
||
|
||
**Layout.** Boundary tween ivory→ink + `--gold-hairline`. `padding-top: clamp(128px, 18vh, 240px)`. Numeral „06“ sticky `.gold-text`. Eyebrow + H2 cols 3–9, H2 Cormorant 300 `clamp(2.75rem, 1.6rem + 4.4vw, 6rem)` ivory. Ablauf cols 3–8, margin-top 56 px: three rows [DM Mono 12 px `--gold` „01“] [Cormorant 400 26 px ivory title] [Jost 300 17 px `--grey-warm` text], `--line-dark` separators, padding-block 22 px. Contact block cols 9–12 (sticky top 30vh desktop): three large links, each DM Mono 11 px `--grey-warm` label + Cormorant 400 `clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)` ivory value with growing gold underline on hover; below: outline button + micro-copy. Colophon cols 1–12, margin-top 128 px: sign-off line, then the footer (§5.3). Mobile: Ablauf, contact block, colophon single column.
|
||
|
||
**Copy.**
|
||
- Eyebrow: „Kontakt“
|
||
- H2: **„Lass uns *sprechen*.“**
|
||
- Ablauf: „01 Kennenlerngespräch — 30 Minuten, kostenfrei, telefonisch oder online. Du erzählst, ich höre zu und frage nach.“ / „02 Analyse & Konzept — Wir klären Ziel, Format und Rahmen. Bei Teams und Einzelpersonen beginnt das meist mit einer Verhaltensanalyse.“ / „03 Umsetzung — Coaching, Training oder Keynote. Auf Deutsch oder Englisch, vor Ort oder online.“
|
||
- Contact: „Schreib mir“ → „info@anelia-wolf.com“ (`mailto:`) / „Ruf an“ → „+49 174 4555115“ (`tel:+491744555115`) / „Vernetzen“ → „LinkedIn ↗“ (`target="_blank" rel="noopener"`)
|
||
- Button: „Kennenlerngespräch anfragen“ · Micro-copy: „Unverbindlich. Auf Deutsch oder Englisch.“
|
||
- Sign-off above the colophon: „Unlock Your Potential — Next Level“
|
||
- Colophon wordmark: „ANELIA WOLF“ / „SALES MENTORING & POTENTIAL DEVELOPMENT“
|
||
|
||
**Motion.** H2 `<Lines/>`; Ablauf rows `<Reveal/>` stagger 0.1 + hairlines; contact links fade + hover underline; colophon hairline `scaleX` full width (1.2 s) as the page's last stroke; wordmark `letter-spacing 0.24em→0.32em` on reveal (0.9 s) — the only tracking tween on the site. Optional Magnet on the button.
|
||
|
||
**Components.** Custom `<Steps/>`, `<ContactLinks/>`, `<Wordmark/>`, `<Rule/>`, Magnet (optional).
|
||
|
||
---
|
||
|
||
## 7. Service pages
|
||
|
||
Routes: `/leistungen/coaching/`, `/leistungen/trainings/`, `/leistungen/keynotes/` (matches `next.config.ts`). Each page is one "issue" internally; the reader sees the plain page name.
|
||
|
||
### 7.1 Shared template (in order)
|
||
|
||
1. **Hero** — ink, `min-height: 60svh`, grid 12. Mastkopf as on the homepage with the page name in the middle slot („Coaching & Analysen“). Numeral `01/02/03` (DM Mono in the mastkopf, not a giant roman numeral). Eyebrow cols 3–9 `--gold`. H1 Cormorant 300 service size, ivory, max 14ch, one italic word, cols 3–11. Subline Jost 300 20 px `--grey-warm` cols 3–7 max 40ch. Page-specific primary CTA + micro-copy. **Facts stack** cols 10–12 top-right: 3–4 DM Mono 12 px lines (Format · Sprache · Ort · Dauer) with gold ticks. Header monogram only; no hero draw, no photo (exception: keynote stage photo, §9). Folio: `01 / 03` + page name. Motion: hairlines + `<Lines/>`, 1.4 s total.
|
||
2. **Ausgangslage** — ivory, `padding-block: clamp(96px, 14vh, 176px)`. H2 cols 3–8. Three rows cols 3–11 as a ledger: [DM Mono numeral `--gold-deep`] [Cormorant 400 Italic `clamp(1.375rem, 1.1rem + 1.2vw, 2rem)` `--ink`, written as the reader's situation]. Hairlines, `<Reveal/>`.
|
||
3. **Leistungsbausteine** — ivory. H2 cols 3–8. Blocks as a **spec table**, not cards: per block one row cols 3–12 with subgrid [title Cormorant 400 30 px, 30 %] [three labelled paragraphs: DM Mono label („Ziel“, „Inhalte“, „Für wen“) `--gold-deep` + Jost 400 17 px `--ink`, 55 %] [meta DM Mono 12 px `--grey-deep` right-aligned: Dauer / Ort / Sprache, 15 %]. Rows padding-block 48 px, `--line-light`. Paper stays paper — no zebra fills. (Trainings page uses the `<details>` table variant, §7.3.)
|
||
4. **Rahmen** — bone block cols 3–12, 1 px `--line-light`, padding 40 px: two-column DM Mono facts table (Label / Wert): Setting, Ort, Sprache, Dauer, Gruppengröße, Vorbereitung. Rows whose value is `[PLATZHALTER]` are removed by a build flag (`site.ts → showPlaceholders: false`), never shown empty.
|
||
5. **Ablauf** — ivory, four numbered rows like `#kontakt` (cols 3–8); marginalia cols 9–12 „Was du bekommst“.
|
||
6. **FAQ** — only if the client supplies answers; otherwise the section does not render. Ledger rows using native `<details>/<summary>`: question Cormorant 400 1.5rem, answer Jost 400, a DM Mono `+` that rotates to `×` via CSS, no accordion library. The question list always includes a price question („Was kostet …?“ — range or „auf Anfrage“).
|
||
7. **Kontakt band** — ink, ~70svh: boundary hairline, H2 Cormorant 300 (page-specific), contact links as on the homepage, page-specific CTA, then colophon + footer.
|
||
|
||
Cross-page: one boundary ink→ivory after the hero, one back before the contact band; masthead is the orientation (no breadcrumbs); folio shows `01 / 03` etc.; one primary CTA per page, identical in hero and band; secondary links never „Mehr erfahren“.
|
||
|
||
### 7.2 `/leistungen/coaching/` — Coaching & Analysen (warmest page)
|
||
|
||
- Mastkopf centre: „Coaching & Analysen“. Eyebrow: „1:1 Coaching & Persönlichkeitsanalysen“.
|
||
- H1: **„Wer bist du – und wer kannst du *sein*?“**
|
||
- Subline: „Persönlichkeits- und Verhaltensanalysen plus 1:1 Coaching: für souveräne Wirkung, klare Positionierung und berufliche Neuorientierung.“
|
||
- CTA: „Kennenlerngespräch anfragen“ · Micro: „Kostenfrei · 30 Minuten · telefonisch oder online“
|
||
- Facts: „1:1“ · „Vor Ort oder online“ · „Deutsch / Englisch“ · „Dauer nach Vereinbarung“
|
||
- Ausgangslage H2: „Drei Situationen.“ — „Du bist fachlich stark – und wirkst im Raum kleiner, als du bist.“ / „Du willst dich klar positionieren und weißt nicht, wofür du stehst.“ / „Du stehst vor einer beruflichen Neuorientierung und willst sie nicht dem Zufall überlassen.“
|
||
- **Special section „Die drei Fragen“** (between Ausgangslage and Bausteine): three double rows cols 3–12; left (cols 3–6, sticky top 30vh) the question in Cormorant 300 `clamp(2.5rem, 1.4rem + 3.6vw, 5rem)` `--ink`; right (cols 7–12) the answer. „Wer bin ich?“ → „Die Verhaltensanalyse zeigt dein Profil: Stärken, Muster, Potenziale. Nicht als Etikett, sondern als Arbeitsgrundlage.“ / „Wo stehe ich?“ → „Im Auswertungsgespräch klären wir, was davon heute sichtbar ist – im Auftritt, in der Sprache, in der Position.“ / „Wo will ich hin?“ → „Das Coaching übersetzt die Antworten in Auftritt, Positionierung und Entscheidungen. Konkret, in deinem Alltag.“ One React Bits BlurText permitted here on the question line (desktop only, one line). Photo 2 (if present) cols 10–12, 4:5, 240 px, sticky, `<Door/>`.
|
||
- Bausteine H2: „Zwei Bausteine.“
|
||
- „Persönlichkeits- & Verhaltensanalyse“ — Ziel: „Dein Profil verstehen: Stärken, Verhaltensmuster, Potenziale.“ Inhalte: „Online-Fragebogen, schriftliches Profil, Auswertungsgespräch [Dauer] [Tool/Zertifizierung].“ Für wen: „Einzelpersonen, Bewerbungs- und Karrierephasen, als Basis für Team-Trainings.“ Meta: „Online · DE/EN · [Dauer]“
|
||
- „1:1 Coaching“ — three tracks as sub-rows: „Souveräne Wirkung – überzeugend auftreten“, „Potenzialentfaltung – klare Positionierung“, „Berufsorientierung – Neuorientierung“. Meta: „Vor Ort oder online · DE/EN · Einzelsetting“
|
||
- Rahmen: Setting Einzelsetting · Ort vor Ort oder online · Sprache Deutsch/Englisch · Dauer [PLATZHALTER] · Paket [PLATZHALTER] · Vorbereitung Kennenlerngespräch, Fragebogen.
|
||
- Ablauf: „01 Kennenlerngespräch“ → „02 Analyse“ → „03 Coaching-Sessions“ → „04 Transfer in den Alltag“. Marginalia „Was du bekommst“: „Schriftliches Profil“ · „Klare Positionierung“ · „Nächste Schritte, die du selbst gehst“.
|
||
- FAQ (if answered): Für wen ist das Coaching? / Wie viele Sessions brauche ich? / Geht das online? / Was kostet das Coaching?
|
||
- Kontakt band H2: **„Fang mit dem Gespräch an.“** CTA „Kennenlerngespräch anfragen“.
|
||
|
||
### 7.3 `/leistungen/trainings/` — Trainings & Workshops (the "offer" page, least motion)
|
||
|
||
- Mastkopf centre: „Trainings & Workshops“. Eyebrow: „Für Unternehmen & Teams“.
|
||
- H1: **„Vertrieb mit *Persönlichkeit*.“**
|
||
- Subline: „B2B-Vertriebstrainings und Leadership-Workshops, die im Alltag funktionieren – nicht nur im Seminarraum. Inhouse, online, auf Deutsch oder Englisch.“
|
||
- CTA: „Training anfragen“ · Micro: „Unverbindlich“ (+ „Antwort innerhalb von 24 Stunden“ only with her commitment — flag).
|
||
- Facts: „Inhouse oder online“ · „1–2 Tage oder Reihe“ · „Deutsch / Englisch“ · „Gruppengröße [PLATZHALTER]“
|
||
- Ausgangslage H2: „Drei Bremsen.“ — „Die Neukundengewinnung stockt – und niemand ruft gern kalt an.“ / „Bestandskunden werden betreut, aber nicht ausgebaut.“ / „Führung und Teamdynamik bremsen den Vertrieb, statt ihn zu tragen.“
|
||
- **Bausteine as a ledger TABLE** (grafted from Auftritt): header row DM Mono caps `--gold-deep` „Modul | Ziel | Inhalte | Für wen“; three rows, each a native `<details>` whose `<summary>` is the full table row (Modul title Cormorant 400 30 px; Ziel and Für wen in Jost 400; meta DM Mono right), expanding to the „Inhalte“ list (3–5 lines, hairline-separated). DM Mono `+`/`×` at the right edge. H2: „Drei Module.“
|
||
- „B2B-Vertriebstraining“ — Ziel „Gesprächsführung, die zum Abschluss führt.“ Inhalte „Bedarfsanalyse · Einwände · Preisgespräch · Verhaltenstypen im Kundengespräch“ Für wen „Außendienst, Innendienst, Key Account“ Meta „1–2 Tage inhouse · DE/EN“
|
||
- „Umsatzwachstum: Neukunden & Bestandskunden“ — Ziel „Kaltakquise, die planbar wird; Bestandskunden, die wachsen.“ Inhalte „Akquise-Routine · Erstkontakt · Nachfassen · Account-Ausbau · Kennzahlen“ Für wen „Vertriebsteams und ihre Führung“ Meta „Trainingsreihe [PLATZHALTER] · DE/EN“
|
||
- „Leadership & Teamdynamik“ — Ziel „Führung, die Vertriebsteams stärkt.“ Inhalte „Verhaltensanalysen im Team · Rollen · Feedback · Konflikte · Zielvereinbarung“ Für wen „Vertriebsleitung, Teamleitung, Geschäftsführung“ Meta „Workshop 1 Tag · vor Ort · DE/EN“
|
||
- **Special section „Wie ich arbeite“**: three short paragraphs cols 3–8 with marginalia — „Praxis statt Folien: Ich bin selbst im B2B-Außendienst. Was wir trainieren, habe ich in der Woche davor gemacht.“ / „Analyse als Fundament: Verhaltensprofile zeigen, wie ein Team tickt – und wie es mit Kunden spricht.“ / „Transfer statt Seminar: Jedes Training endet mit konkreten Vereinbarungen für die nächsten 30 Tage.“
|
||
- „Typische Ziele“ (goals, not promises) as three ledger lines: „Mehr qualifizierte Erstgespräche“ / „Systematischer Bestandskundenausbau“ / „Klarere Führung im Vertriebsteam“.
|
||
- Rahmen: Format Inhouse-Workshop 1–2 Tage / Trainingsreihe / Online · Sprache DE/EN · Gruppengröße [PLATZHALTER] · Vorbereitung Bedarfsgespräch, optional Verhaltensanalysen.
|
||
- Ablauf: „01 Bedarfsgespräch“ → „02 Konzept“ → „03 Training“ → „04 Follow-up nach 30 Tagen“.
|
||
- FAQ (if answered): Inhouse oder extern? / Wie viele Teilnehmende? / Auch für Führungskräfte ohne Vertriebsrolle? / Was kostet ein Trainingstag?
|
||
- Kontakt band H2: **„Sprechen wir über dein Team.“** CTA „Training anfragen“; phone prominent.
|
||
- Motion: no pin, no blur, no BlurText — only `<Rule/>`, `<Lines/>`, `<Reveal/>`.
|
||
|
||
### 7.4 `/leistungen/keynotes/` — Keynotes & Speaking (the stage page)
|
||
|
||
- Mastkopf centre: „Keynotes & Speaking“. Eyebrow: „Keynotes nach dem WOLF-Prinzip · Deutsch & Englisch“.
|
||
- H1: **„Mut zum *Erfolg*.“** — the italic word may also be `.gold-text` here (this page's one gradient word).
|
||
- Subline: „Keynotes nach dem WOLF-Prinzip für Firmen-Events, Kick-offs und Kongresse. Ein Impuls, der nachwirkt – auf Deutsch oder Englisch, live oder online.“
|
||
- CTA: „Keynote anfragen“ · Secondary „Speaker-Profil (PDF) →“ only if the file exists in `/public`.
|
||
- Facts: „20–60 Minuten“ · „Live, online, hybrid“ · „Deutsch / Englisch“ · „Deutschlandweit, Europa auf Anfrage“
|
||
- Hero photo: stage photo (if present) cols 8–12, 16:10, `<Door/>`; otherwise no photo.
|
||
- **Signature Talk** (replaces Ausgangslage): H2 „Der Vortrag.“ Ledger with one main row: „01 · Das WOLF-Prinzip – Mut zum Erfolg!“ — Kernbotschaft „Starke Persönlichkeit, souveräne Wirkung, maximaler Erfolg: wie du dein Potenzial erkennst und selbstbewusst einsetzt – im Leben und im Business.“ — Für wen „Mitarbeitende, Vertriebsteams, Führungskräfte, Karriere-Publikum“ — Meta „20–60 Min. · DE/EN · live & online“. Further talks (`02 Unlock your Sales-DNA`, etc.) only after client approval — flag.
|
||
- **Typographic interruption** (this page only): 100svh ink section, „Mut zum Erfolg.“ in Cormorant 300 `clamp(4rem, 2rem + 12vw, 14rem)` ivory, cols 2–12, `<Lines/>`; below in DM Mono 12 px `--gold`: „Keynote · herCAREER Expo 2026 · 23.10. · 10:30 · Auditorium 2“.
|
||
- Anlässe: three columns like `#fuer-wen`: „Firmen-Events & Kick-offs“ / „Vertriebstagungen & Kongresse“ / „Karriere-Events & Frauennetzwerke“.
|
||
- „Was dein Publikum mitnimmt“: „Klarheit darüber, wer man ist und wofür man steht.“ / „Ein konkretes Vorgehen für souveränes Auftreten – im Kundengespräch wie im Team.“ / „Den Mut, die nächste Entscheidung selbst zu treffen.“
|
||
- **Speaker-Facts strip** (grafted): one full-width row, equal cells with 1 px `--line-light` vertical separators; each cell DM Mono label `--grey-deep` + Jost 400 value `--ink`: „Sprachen — DE / EN“ · „Dauer — 20–60 Min.“ · „Format — live, online, hybrid“ · „Technik — Headset, Präsentation optional“ · „Reise — deutschlandweit, Europa auf Anfrage“ · „Anfrage — unverbindlich“.
|
||
- Termine: ledger as on the homepage (herCAREER 2026), gold dot.
|
||
- Für Veranstalter: row „Speaker-Profil (PDF): Kurzvita, Themen, Fotos, Technik“ from `/public` — only if delivered.
|
||
- FAQ (if answered): Wie lange im Voraus anfragen? / Auch als Workshop nach der Keynote? / Auf Englisch? / Gibt es Video oder Referenzen?
|
||
- Kontakt band H2: **„Hol das WOLF-Prinzip auf deine Bühne.“** CTA „Keynote anfragen“ · Micro „Unverbindlich · Antwort auf Deutsch oder Englisch“.
|
||
|
||
---
|
||
|
||
## 8. Impressum & Datenschutz
|
||
|
||
Routes `/impressum/`, `/datenschutz/`. Ivory, `data-theme="ivory"`, no motion except the template enter fade and the Umblättern sheet. Header and footer identical to all pages. Layout: masthead (centre slot „Impressum“ / „Datenschutz“), content cols 3–9, H1 Cormorant 400 44 px, H2 as DM Mono 12 px caps `--gold-deep` with gold tick, body Jost 400 17 px `--ink` lh 1.65, meta („Stand: …“) DM Mono `--grey-deep`, links `--gold-deep` underlined. Content from the legal research templates: § 5 DDG fields, no HR entry, no OS-platform link, VSBG sentence, § 18 MStV voluntary line, Bildnachweis, „Bezeichnung WOLF-Prinzip“ (not „Wortmarke“ until registered); Datenschutz with hosting/log section, contact section, external links, self-hosted fonts, no cookies/no storage statement, rights, supervisory authority placeholder. No cookie banner. Verify before launch: no third-party requests, no `localStorage`/`sessionStorage` anywhere in the build.
|
||
|
||
**404** (`not-found.tsx`): ink, monogram 40vh with only the two V strokes drawn, text Cormorant 300 „Hier ist der Wolf nicht.“, link „Zur Startseite →“, footer with legal links.
|
||
|
||
---
|
||
|
||
## 9. Photo strategy
|
||
|
||
Treatment (always identical): warm grade, not duotone — `filter: sepia(.12) saturate(.9) contrast(1.02)`; static grain over it; hard rectangles (radius 0); 1 px `--line-light` frame on ivory / no frame on ink; caption DM Mono 11 px with gold tick „Anelia Wolf · Foto: [Name]“. Never gold frames, never scale-on-hover, never tilt, never freistellen. The face stays recognisable — event managers book a face.
|
||
|
||
- **0 photos:** monogram is the image (hero 56vh with handoff, Über Anelia 24vh vignette, service heroes without photo). Werdegang ledger + marginalia become the "portrait". Nothing waits for an image. The 800×800 herCAREER picture is too small for the hero; with cleared rights it may run in Über Anelia at ≤ 320 px width only.
|
||
- **1 photo (portrait ≥ 2000 px):** hero cols 8–12 (variant A); the same file in Über Anelia in a tighter head-and-shoulders 4:5 crop — different crop and grade strength (hero 100 %, portrait 60 %) make it read as two images. Service pages without photo.
|
||
- **2 photos:** photo 1 hero, photo 2 Über Anelia + coaching page (Die drei Fragen, small, sticky).
|
||
- **3 photos (ideal: portrait, three-quarter portrait, landscape stage/speaking):** photo 3 on the keynote hero cols 8–12, 16:10. If no stage picture exists, the keynote page carries no photo — the typographic interruption carries it.
|
||
|
||
Technical: `next/image` with `unoptimized`, two pre-generated widths per motif (1200 / 2000 px, AVIF + JPEG fallback), `sizes`, `priority` on the hero image, `<Door/>` reveal instead of fade, descriptive alt texts, photographer credit in caption and Impressum.
|
||
|
||
Brief to the client/photographer: one 90-minute session, neutral light background (beige/grey), soft side light from **top-left** (matches the gold gradient's light source), three motifs — frontal portrait, three-quarter portrait looking left (into the text), landscape half-shot speaking — ≥ 3000 px long edge, room left of the head for the monogram overlap, written usage rights.
|
||
|
||
---
|
||
|
||
## 10. Component & library shopping list
|
||
|
||
| Need | Choice | Source |
|
||
|---|---|---|
|
||
| Line/mask headline reveals | React Bits SplitText (`lines`, `mask`, `autoSplit`, fonts.ready) | https://reactbits.dev/text-animations/split-text |
|
||
| Scrubbed editorial paragraph | React Bits ScrollReveal (`enableBlur: false`, desktop only) | https://reactbits.dev/text-animations/scroll-reveal |
|
||
| One blur line (coaching page questions) | React Bits BlurText | https://reactbits.dev/text-animations/blur-text |
|
||
| Scroll progress hairline | Magic UI Scroll Progress (restyled 1 px `--gold`) | https://magicui.design/docs/components/scroll-progress |
|
||
| Magnetic primary CTAs (optional, 3–4 max) | React Bits Magnet (strength 3, pointer: fine) | https://reactbits.dev/animations/magnet |
|
||
| Wolf draw / scrubbed draw | GSAP DrawSVGPlugin (free since 3.13) or `motion.path pathLength` | https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/ |
|
||
| Pin (WOLF-Prinzip) | GSAP ScrollTrigger + `useGSAP` + `gsap.matchMedia` | https://gsap.com/docs/v3/Plugins/ScrollTrigger/ |
|
||
| Smooth scroll | `lenis/react` (`ReactLenis root`, ticker-driven) | https://github.com/darkroomengineering/lenis |
|
||
| Enter animation / reduced motion | `motion` (`MotionConfig reducedMotion="user"`, `whileInView`) | https://motion.dev |
|
||
| Custom (in-house) | `Rule`, `Lines`, `Reveal`, `Draw`, `Door`, `Monogram`, `Wordmark`, `Masthead`, `Numeral`, `Marginalia`, `Ledger` (toc / werdegang / termine / module-table), `Formula`, `Columns`, `Steps`, `ContactLinks`, `Facts`, `SpeakerFacts`, `FAQ` (`<details>`), `TransitionLink`, `Curtain`, `OverlayMenu`, `Grain` | — |
|
||
| Explicitly not used | FlowingMenu, StaggeredMenu, TiltedCard, DecayCard, MetallicPaint, Noise canvas, ScrollStack, Sticky Scroll Reveal, Text Hover Effect, Scroll Based Velocity, any shader/particle background, custom cursors, Animated Testimonials, CountUp, LogoLoop, GradientText, Flip Words | — |
|
||
|
||
Repo tasks before section work: (1) replace Geist with `next/font/local` (Cormorant 300/400/400i, Jost variable, DM Mono 400) in `src/app/fonts.ts`; (2) add `src/lib/gsap.ts` registering ScrollTrigger, SplitText, DrawSVG, `useGSAP`; (3) `SmoothScroll.tsx` per the research guide (ticker-driven Lenis, `ScrollTrigger.update` on scroll, scroll-to-top on pathname); (4) `template.tsx` enter + refresh; (5) `public/brand/logo-mark.svg` as stroke paths; (6) `site.ts` flags: `showPlaceholders`, `showFaq`, `showStimmen`, `showSpeakerPdf`, `showSecondTalk`, `show24hPromise`, `showIndustry`.
|
||
|
||
---
|
||
|
||
## 11. AI-tells avoided / handcrafted signals used
|
||
|
||
**Avoided:** centred hero with pill eyebrow + two buttons; three icon cards; Tailwind default palette or purple/indigo gradients; gradient text on headings/metrics (one word per page, display only); Inter/Geist/Instrument Serif; template rhythm (hero → cards → stats → carousel → FAQ → CTA banner); counters and „0+“ stats; glassmorphism, drop shadows, glow, neon borders; thick coloured left borders; dark-mode-by-reflex with dotted grids; emoji/icon bullets; stock imagery (handshake, laptop, summit); buzzword copy („Empower“, „Next-level Lösungen“, „am Montag noch trägt“, triple adjectives, „Stell dir vor“); over-rounded corners (radius 0 site-wide); testimonial carousel with stars and avatars; uniform fade-up on everything, bounce/elastic, image scale on hover, pulsing dots; auto-scrolling logo marquee; symmetric 50/50 rows; kicker labels that just say „OUR SERVICES“; custom cursor; shader backgrounds; rotating/typewriter headlines; „Mehr erfahren“ buttons; magazine jargon exposed to the reader.
|
||
|
||
**Handcrafted signals:** three-slot masthead with a folio; sticky section numerals in the gutter; asymmetric 12-column layouts (content starting at column 3, portraits bleeding past the edge, offset middle column); roman/italic emphasis inside one headline; hairline rules and tracked 11.5 px caps eyebrows with gold ticks (engraved-stationery system); tabular mono numerals for dates, formats, phone; typographic ledgers instead of cards and logo walls; the WOLF-Prinzip typeset as an equation with definitions; a Werdegang ledger without unverified years; marginalia with verifiable facts; the logo drawn as a stroke whose neck hands off into the page's first hairline; one sheen over metal; a page-turn transition that names the destination; deliberate light/dark rhythm with tweened boundaries; portraits in a door mask with a warm grade and a mono caption; first-person copy with her own phrases (WOLF-Prinzip, Mut zum Erfolg, the three questions) and B2B nouns; a 404 with the wolf missing; native `<details>` FAQ and `<details>` module table; zero third-party requests, no cookies, no forms.
|
||
|
||
---
|
||
|
||
## 12. Open questions for the client (blocking before launch)
|
||
|
||
1. **Logo vector:** original SVG/AI of the W-monogram; confirmation that the wolf may be drawn as a single stroke and shown alone (favicon, curtain). Written usage rights from the designer.
|
||
2. **Impressum:** ladungsfähige Anschrift, USt-IdNr. or W-IdNr. (or neither), Kleinunternehmerregelung yes/no, Berufshaftpflicht yes/no, Bundesland (supervisory authority), hoster and e-mail provider (for the Datenschutz text and AVV).
|
||
3. **Nebentätigkeit:** may the site say „B2B-Außendienst“? May it say „Medizinprodukte“? Employer is never named.
|
||
4. **Biography approval:** Vater als Händler, Zahntechnikerin, Abteilungsleitung, Premium-Store-Management, Zwillinge — all from her herCAREER text; confirm each, and whether years may be added later.
|
||
5. **Photos:** which originals exist (≥ 2000 px, portrait/landscape/stage), photographer name for credits, rights for the herCAREER 800×800 image.
|
||
6. **Analysis tool:** which profiling instrument (DISG/INSIGHTS/persolog/…), active licence, may the name/badge appear, duration of the Auswertungsgespräch.
|
||
7. **Rahmen values:** coaching session length and packages; training group sizes and series format; keynote travel radius; technical requirements.
|
||
8. **Prices:** range or „auf Anfrage“ for coaching, training day, keynote.
|
||
9. **FAQ answers** for the three pages (section ships only with answers).
|
||
10. **Second talk:** may „Unlock your Sales-DNA“ be listed, and with what content? Any further talks?
|
||
11. **Speaker profile PDF:** exists or to be produced (Kurzvita, Themen, Fotos, Technik).
|
||
12. **Promises:** „Antwort innerhalb von 24 Stunden“ — yes/no. Free 30-minute Kennenlerngespräch — confirm.
|
||
13. **Testimonials / references:** any quotes with name, role, company and written consent; any logos with permission; herCAREER logo permission (otherwise text link only).
|
||
14. **Audience weighting:** B2B first or individuals first? (Copy swap only: row order in Leistungen and the hero subline.)
|
||
15. **Language:** German only at launch; English route later? „Deutsch & Englisch“ in the masthead refers to her services, not the site.
|
||
16. **Trademark:** „WOLF-Prinzip“ is used by third parties (Bornemann, Kitzler) — recommend a Markenrecherche; until registered the site says „Bezeichnung“, never „Wortmarke“.
|
||
17. **After 23.10.2026:** the Termine rows become „Gesprochen bei herCAREER 2026“ or a Stimmen block — who maintains that, and when?
|
||
|
||
---
|
||
|
||
## 13. Considered and deliberately not built (v2 candidates)
|
||
|
||
- **Site-wide gold thread** (Faden): the strongest idea in the jury, too fragile for a 2-day static build (anchor measurement across font swap, image load, pin spacer, hover row growth, mobile URL bar). Its safe fragments are in: eyebrow ticks and the hero neck-to-hairline handoff.
|
||
- **W·OLF hero with header migration** (Auftritt): best single hero idea; requires a FLIP into the header slot synced with Lenis and re-measured on every resize. Candidate for a later iteration once the base ships and the logo vector is confirmed.
|
||
- **Jost-only typography**: coherent and disciplined, but loses the feminine pole and the true italics; Cormorant stays, with the restrictions in §3. Bodoni Moda is the documented fallback if the client wants a harder fashion edge.
|
||
---
|
||
|
||
## Z. Umgesetzte Abweichungen (Stand 2026-09-03, nach zwei QA-Runden und fünf Fachprüfungen)
|
||
|
||
Diese Entscheidungen wurden während der Qualitätssicherung getroffen und sind gebaut. Sie gehen der
|
||
obigen Synthese vor.
|
||
|
||
1. **Grund und Themenwechsel ohne Skript.** Der ursprüngliche Ansatz, `--bg/--fg/--accent` am `<body>`
|
||
zu tweenen, ist verworfen. Ursache: Jeder Abschnitt deklariert dieselben Variablen über
|
||
`[data-theme]`, und die nähere Regel gewinnt. Am Übergang stand deshalb der auslaufende Abschnitt
|
||
mit eigener Textfarbe auf bereits gewechseltem Grund. Jetzt malt jeder Abschnitt seinen eigenen
|
||
deckenden Grund, die goldene Haarlinie markiert die Naht. `ThemeTween.tsx` ist gelöscht,
|
||
`<body>` hat einen festen Grund. Kein Skript fasst mehr Farben an.
|
||
2. **Kopfzeile.** Die drei Navigationslinks erscheinen erst ab 1280 Pixel, der Menüknopf bleibt bis
|
||
dahin. „Kontakt“ ab 1024. Die Mittelspalte der Mastkopfzeile ist unterhalb 1280 ausgeblendet.
|
||
3. **Einblendungen.** Kein `autoAlpha` und kein `visibility: hidden` bei Scroll-Einblendungen, sonst
|
||
fallen Elemente aus der Tabulatorreihenfolge. Nur `opacity` und `y`. Ausnahme ist der
|
||
Seitenwechsel-Vorhang, der bewusst aus der Reihenfolge fällt.
|
||
4. **Schriftgrößen.** Bodoni Moda wird nirgends unter 28 Pixel gesetzt. Kleinere Titel laufen in Jost.
|
||
5. **Sprungmarken über Seitengrenzen.** Nach dem Seitenwechsel wird erst `document.fonts.ready`
|
||
abgewartet, dann zwei Bildwechsel, dann `ScrollTrigger.refresh()`, dann zum Anker gesprungen.
|
||
6. **Heldenbereich.** Die Textspalte belegt unterhalb 1440 Pixel sechs statt acht Rasterspalten, damit
|
||
sie nicht in das Monogramm läuft. Der Bereich passt bei jeder geprüften Breite exakt in das erste
|
||
Bild, die Goldlinie vom Wolfshals endet auf der Folio-Linie.
|
||
7. **Kennziffern.** Alle sechs Abschnitte der Startseite tragen die große Bodoni-Kennziffer, nicht nur
|
||
die ersten drei.
|
||
8. **WOLF-Prinzip.** Die Bühne ist CSS-`sticky` statt GSAP-Pin. Bei reduzierter Bewegung fällt sie auf
|
||
ihre natürliche Höhe zusammen.
|
||
9. **Flaggen.** Ein Block, dessen Flagge falsch ist und dessen Datei fehlt, wird gar nicht gerendert.
|
||
10. **Positionierungs-Absatz** in Jost statt Bodoni, damit Überschrift und Fließtext nicht konkurrieren.
|
||
|
||
---
|
||
|
||
## Z2. Schriftwahl vom 06.09.2026 (ersetzt Abschnitt A.1)
|
||
|
||
Nach einem Vergleich unter `/schrift-test/` (27 Paarungen im Hero) und
|
||
`/schrift-test/seite/` (die vollständige Startseite zum Umschalten) fiel die
|
||
Entscheidung auf Paarung 01 aus der pagecloud-Liste:
|
||
|
||
| Rolle | Schrift | Ersetzt |
|
||
|---|---|---|
|
||
| Display | Playfair Display (variable, normal + kursiv) | Bodoni Moda |
|
||
| Text, Labels, Wortmarke | Source Sans 3 (variable) | Jost |
|
||
| Ziffern, Meta | DM Mono | unverändert |
|
||
|
||
Playfair hat keine optische Achse, deshalb sind alle
|
||
`[font-variation-settings:'opsz'_N]` entfernt. Die Mindestgröße von 28 px für die
|
||
Display-Schrift bleibt; darunter läuft Text in Source Sans 3.
|
||
|
||
Die CSS-Variablen heißen jetzt neutral `--font-display-face` und `--font-body-face`
|
||
statt `--font-bodoni` und `--font-jost`, damit sie bei einem weiteren Wechsel nicht
|
||
in die Irre führen.
|
||
|
||
**Betonungswort.** Das eine `<em>` je Headline ist kursiv und auf `data-theme="dark"`
|
||
zusätzlich im Goldverlauf. Auf hellem Grund bleibt es rein typografisch: Der Verlauf
|
||
käme auf Elfenbein auf 2,4:1. Damit bleibt Gold weiter auf die dunklen Flächen
|
||
rationiert. Die Regel steht als eine Selektorgruppe in `globals.css`.
|
||
|
||
---
|
||
|
||
## Z3. Zweite Sprache vom 06.09.2026 (erweitert Abschnitt 8 und 12)
|
||
|
||
Die Spec kannte nur eine Sprache. Auf Kundenwunsch steht die Seite jetzt
|
||
vollständig auf Deutsch **und** Englisch; der alte Navigationspunkt „Kontakt“
|
||
ist durch einen Flaggen-Umschalter ersetzt.
|
||
|
||
**Adressen.** Deutsch behält seine Pfade, Englisch bekommt eigene Segmente
|
||
(`/en/`, `/en/services/coaching/`, `/en/imprint/`, `/en/privacy/`). Eine
|
||
Sprachweiche über `Accept-Language` gibt es bewusst nicht: Der Export hat keinen
|
||
Server, und eine Weiterleitung, die niemand abschalten kann, ist schlimmer als
|
||
zwei sichtbare Flaggen. Alle Pfade stehen in `routesByLang` (`src/lib/i18n.ts`).
|
||
|
||
**Struktur statt Wortlaut.** Jede deutsche Inhaltsdatei exportiert ihre Form
|
||
(`Widen<typeof x>`), die englische Datei erfüllt genau diesen Typ. Damit ist
|
||
„die englische Seite hat den Abschnitt nicht“ ein Typfehler und keine
|
||
Entdeckung im Browser. Der Seitenaufbau liegt einmal in
|
||
`src/components/pages/*Body.tsx`, die Routendateien tragen nur noch Metadaten.
|
||
|
||
**Zwei Wurzel-Layouts.** `<html lang>` muss die Sprache des Dokuments angeben
|
||
(WCAG 3.1.1), und im App Router schreibt nur das Wurzel-Layout das
|
||
`<html>`-Element. Deshalb `app/(de)/layout.tsx` und `app/en/layout.tsx`, beide
|
||
nur ein Aufruf von `<Shell lang>`. Folge: Ein Sprachwechsel ist ein voller
|
||
Seitenaufbau (richtig so) — und Next kann keine gemeinsame 404 mehr bauen,
|
||
weshalb `experimental.globalNotFound` plus `src/app/global-not-found.tsx` die
|
||
Datei `out/404.html` erzeugt.
|
||
|
||
**404 zweisprachig.** Ein statischer Export liefert für jede unbekannte Adresse
|
||
dieselbe Datei aus, auch unter `/en/`. Die Seite bleibt deutsch, trägt aber
|
||
unter einer Haarlinie einen englischen Zweizeiler mit eigenem Link, in
|
||
`lang="en"` ausgezeichnet.
|
||
|
||
**Rechtstexte.** Verbindlich bleibt die deutsche Fassung — § 5 DDG verlangt die
|
||
Angaben ohnehin auf Deutsch. Beide englischen Rechtsseiten sagen das im ersten
|
||
Abschnitt und verlinken das deutsche Original. Der Build-Guard
|
||
(`assertNoPlaceholders`) läuft über beide Fassungen.
|
||
|
||
**Gold-Rationierung.** Die Flaggen sind die einzige farbige Fläche im Kopf. Sie
|
||
sind 16 × 11 px, randlos und stehen neben dem Sprachkürzel in DM Mono — eine
|
||
Flagge bezeichnet ein Land, nicht eine Sprache, deshalb trägt das Kürzel die
|
||
Aussage und der zugängliche Name nennt die Sprache ausgeschrieben.
|