# Bauplan: Kanzlei & Beratung: Haltung und Klarheit

Rezept `kanzlei-beratung-souveraen` · Kanzlei / Steuerberatung / Wirtschaftsprüfung / Unternehmensberatung · Stimmung: seriös, souverän, klar, zurückhaltend · Stand 02.11.2026

Eine ruhige Text-Serif für Überschriften, eine sachliche Grotesk für alles andere, ein tiefer Markenton (Nachtblau oder Aubergine) auf warmen Grautönen. Inhalte statt Bildwelten: Rechtsgebiete, Köpfe, Mandate, Insights. Bewegung bleibt kurz und funktional (125–330 ms), nichts zählt hoch, nichts schwebt.

## Dateien

- `tokens.css` in diesem Ordner: Schriften, Farben, Kurven, Dauern, Button-Grundwerte. Zuerst einbinden, dann nur diese Variablen verwenden.
- Rezept im Detail: https://cecodesign.de/lab/fundus/rezepte.json (id `kanzlei-beratung-souveraen`) und https://cecodesign.de/lab/fundus/rezepte/kanzlei-beratung-souveraen/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `newsreader` · Text: `schibsted-grotesk`
- Größen: Wie Oppenhoff: Serif nur für Überschriften und Zitate, Grotesk für Text, Navigation, Labels. h1 clamp(2rem, 1.3rem + 2.6vw, 3.5rem), Newsreader wght 400 (opsz automatisch), Laufweite -0.01em, Zeilenhöhe 1.1; h2 clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); Fließtext Schibsted Grotesk 1.0625rem, wght 400, Zeilenhöhe 1.6, max. 65ch; Navigation/Labels wght 500 (Graphik-Prinzip 400/500), Meta 0.8125rem. Kein Bold über 600.
- Techniken: [Serif + Grotesk als ‚Duotone‘ (Mono als dritte Stimme)](https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/demo) `serif-grotesk-duotone`, [Optische Größen nutzen (opsz-Achse)](https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo) `optische-groessen-opsz`, [Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty](https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/demo) `lesesatz-text-wrap`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Echte Initialen mit initial-letter](https://cecodesign.de/lab/fundus/typo-techniken/initial-letter-initialen/demo) `initial-letter-initialen`

## Farbe

Ein tiefer, gesättigter Markenton (Nachtblau, Aubergine) für Überschriften, Header und dunkle Sektionen; warme Grautöne statt reinem Weiß für Flächen; ein heller Akzent nur für Links, Fokus und aktive Filter. Keine Verläufe, keine Stockfoto-Blautöne.

- `--farbe-grund` #F9F8F8 (Grund (Oppenhoff))
- `--farbe-flaeche` #EFEBEB (Flächenwechsel/Karten (Oppenhoff; Linien #D2CDC7))
- `--farbe-text` #1E1E50 (Marke, Überschriften, dunkle Sektion (Oppenhoff; Alternative Aubergine #2E1A47 wie Slaughter and May))
- `--farbe-text-2` #212529 (Fließtext)
- `--farbe-leise` #8E7C6D (Meta/Datum)
- `--farbe-akzent` #00BEE6 (Akzent für Links/Fokus (sparsam, Oppenhoff))
- `--farbe-text-3` #7C6C5E (Meta-Text barrierefrei (4.8 : 1 auf #F9F8F8; #8E7C6D nur für Linien oder Schrift ab 24 px))

## Bewegung

- Animationsstil: [Animationsstil „Swiss knackig“](https://cecodesign.de/lab/fundus/animationsstile/token-swiss-knackig/demo) `token-swiss-knackig`
- Kurve: cubic-bezier(0.25, 1, 0.5, 1) (token-swiss-knackig, Eintritt); Austritt cubic-bezier(0.5, 0, 0.75, 0)
- Dauer: 125 (Farbe, Unterstreichung), 250 (Dropdown, Akkordeon), 330 (Mega-Menü, Drawer), 500 (Bild-Einblendung)
- Regel: Eine Ausklang-Kurve für alles, kurze Dauern wie Oppenhoff und Noerr. Bewegung nur entlang des Rasters (y oder x), keine Masken-Reveals an Text, kein Hochzählen von Zahlen. Schließen etwas schneller als Öffnen. View Transitions zwischen Seiten als ruhiger Crossfade.

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 32, 48, 64, 96, 128
- Sektionsabstand: clamp(72px, 9vw, 136px)
- Dichte: mittel
- Hinweis: Geordnet und ruhig: Insights und Köpfe in festen Rastern mit 32 px Abstand, Fließtext auf 65ch.
- Spalten: 12
- Seitenrand: clamp(20px, 4vw, 56px)
- Spaltenabstand: clamp(16px, 2vw, 32px)
- Maximale Breite: 1280px
- Raster: Hero 7/5 (Satz links, Insight rechts). Köpfe als 4er-Raster mit einheitlichem Porträt 4:5, Insights als Liste mit Datum und Rubrik.
- Radius klein: 0
- Radius groß: 0
- Pillenform für Buttons: False
- Linie: 1px #D2CDC7 zwischen Listeneinträgen und um Felder
- Schatten: keiner
- Form: Keine Rundung, keine Schatten, kein Glas. Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie), Formularknöpfe eckig im Markenton.

## Bildsprache

- Licht: Porträts in einheitlichem, weichem Licht vor demselben Hintergrund.
- Ausschnitt: Brustbild auf Augenhöhe; Räume der Kanzlei nur als ruhige Totale.
- Personen: Ja: nur echte Partner:innen und Team, mit Funktion und Sprachen.
- Formate: 4:5, 3:2
- Nicht: Keine Skyline, kein Handschlag, keine Justitia, keine Paragraphen- oder Waagen-Symbole, keine Stock-Meetings.

## Ton der Texte (Beispiele nur als Tonprobe, nicht übernehmen)

- Anrede: Sie
- Sätze: Präzise und vollständig, Fachbegriff erklärt, keine Floskeln. Insights mit Datum und Rubrik.
- Haltung: Souverän und sachlich, auf Augenhöhe mit der Mandantin.
- Tonproben: Wir beraten Familienunternehmen bei Nachfolge und Verkauf., Neue Regeln zur Grundsteuer: was Eigentümer jetzt prüfen sollten.
- Nicht: „Ihr kompetenter Partner in allen Rechtsfragen“, „maßgeschneiderte Lösungen“, „Wir kämpfen für Ihr Recht!“.

## Hero

Ohne Stockfoto: ein Satz Positionierung in der Serif und als Einstieg die aktuelle Insight oder Studie (editorial-magazin-layout, Variante cover, ohne den Lenis-Teil der Demo), alternativ ein echtes Teamfoto. Kein Video, keine Skyline, kein Handschlag. Kleine Kanzlei: Satz + Teamfoto + „Erstgespräch“ und Telefon.

- Raster: 12 Spalten: Positionierungssatz in der Serif über Spalte 1 bis 7, aktuelle Insight als Cover über 8 bis 12 (editorial-magazin-layout, Variante cover).
- Bild: Kein Stockfoto; Cover der aktuellen Insight 4:5 oder echtes Teamfoto 3:2.
- Überschrift: clamp(2rem, 1.3rem + 2.6vw, 3.5rem), Newsreader 400, oben links.
- Handlung: „Erstgespräch vereinbaren“ (Markenton, eckig) und Telefon als Textlink.
- Zusatz: Rubrik und Datum der Insight in Tabellenziffern über dem Cover; bei Steuerberatung Mandantenportal im Kopf.

- Hero: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=cover) `editorial-magazin-layout` · Variante „Magazin-Cover als Hero“

## Sektionen in dieser Reihenfolge

1. **Rechtsgebiete / Leistungen / Branchen (je Leistung eine Unterseite, Antwort zuerst)**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen) `akkordeon-hoehe-auto` · Variante „Leistungsliste mit Bild“, [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis) `leistungsseite-antwort-zuerst` · Variante „Praxis“
2. **Köpfe / Team (filterbar nach Fachgebiet, Standort)**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster) `team-ueber-mich-layout` · Variante „Raster mit Filter“, [Facettenfilter mit Ergebnisliste](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste) `facettenfilter-ergebnisliste` · Variante „Filterleiste mit Popover“
3. **Ausgewählte Mandate / Recent work**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung) `editorial-magazin-layout` · Variante „Zeitung mit Spalten“
4. **Insights / News / Studien (Long-Reads mit einer echten Initiale)**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin) `editorial-magazin-layout` · Variante „Magazin“, [Echte Initialen mit initial-letter](https://cecodesign.de/lab/fundus/typo-techniken/initial-letter-initialen/demo) `initial-letter-initialen`
5. **Zahlen & Fakten (Standorte, Berufsträger, Gründung)**: [Zahlen-/Fakten-Sektion als Typo-Ereignis](https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=tabelle) `zahlen-fakten-section` · Variante „Ruhige Tabelle“
6. **Auszeichnungen / Rankings**: [Logo-Wand / Social-Proof-Band](https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=auszeichnungen) `logo-wand-social-proof` · Variante „Auszeichnungen mit Jahr“
7. **Karriere**: [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=liste) `stellen-karriere` · Variante „Viele Stellen mit Filter“
8. **Erstgespräch / Kontakt (Formular, Rückruf, Mandantenportal-Link)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt) `formular-fehlerzusammenfassung` · Variante „Kompakt über dem Knopf“, [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
9. **Standorte / Anfahrt (Adresse als Text, Karte per 2-Klick, „Termin nach Vereinbarung · Telefon erreichbar“; Standortliste nur ab zwei Büros)**: [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=bild) `karte-zwei-klick` · Variante „Kartenbild mit 2-Klick“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin) `oeffnungszeiten-status` · Variante „Termin nach Vereinbarung“

## Signatur (Pflicht)

- [Echte Initialen mit initial-letter](https://cecodesign.de/lab/fundus/typo-techniken/initial-letter-initialen/demo) `initial-letter-initialen`

## Buttons

- Haupthandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie) `pfeil-icon-button` · Variante „Linie (Stripe)“
- Nebenhandlung: [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`

## Weitere Bausteine

- Navigation: [Mega-Menü mit morphendem gemeinsamem Viewport](https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/demo) `mega-menue-morphing-viewport`, [Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt](https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/demo) `sticky-shrink-header`, [Gestapelte bzw. mehrstufige Drawer-Navigation](https://cecodesign.de/lab/fundus/navigation/gestapelte-drawer-navigation/demo) `gestapelte-drawer-navigation`
- Hover: [Hover-Absicht und Zeitlogik](https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/demo) `hover-absicht-timing`
- Mikroanimation: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq) `akkordeon-hoehe-auto` · Variante „FAQ mit Suche und Sprunglinks“, [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`
- Galerie: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne) `css-native-karussell` · Variante „Vollbild-Bühne“
- Footer: [Mega-Footer mit Sitemap und Utility-Leiste](https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/demo) `mega-footer-sitemap`, [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=basis) `studio-visitenkarte-footer` · Variante „Stille Visitenkarte“

## Grundausstattung (jede Seite)

- [Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo) `vt-cross-document-mpa`
- [Native CSS-Scroll-Reveals mit view()](https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/demo) `css-view-reveal-nativ`
- [Unterstreichungs-Varianten](https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo) `unterstreichung-varianten`
- [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
- [Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)](https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo) `consent-banner-gestaltet`
- [Fokus-Stil als Gestaltungssystem](https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo) `fokus-stil-system`
- [Sprunglinks und Landmarken](https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo) `sprunglinks-landmarken`
- [Schalter „Bewegung reduzieren“ mit Pause-Knöpfen](https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo) `bewegung-pausieren-schalter`
- [Fehlerseite und Leerzustände](https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo) `fehlerseite-leerzustand`
- [Natives Modal mit <dialog>](https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo) `dialog-modal-nativ`
- [Zoom- und textabstandfestes Layout](https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo) `zoom-und-textabstand-robust`
- [Kontrastmodus und contrast-color()](https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo) `kontrastmodus-forced-colors`
- [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo) `firmendaten-strukturiert`
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`

## Nicht verwenden

- zahlen-odometer – hochzählende Kennzahlen wirken verkäuferisch; Zahlen stehen einfach da
- highlight-marker-underline – laut Katalog nicht für sehr formale Marken
- marquee-laufband – Mandanten- oder Ranking-Logos im Laufband wirken nach Startup
- cinematic-video-hero – Handschlag- und Skyline-Stockvideos sind das Kanzlei-Klischee
- smooth-scroll-lenis / magnetische-elemente / jeder Custom-Cursor – Show statt Seriosität
- kreistext-siegel-rotierend – 'Seit 1950'-Siegel wirken wie Werbung
- mesh-gradient-shader – kein Bezug zur Branche

## Regeln

- Hero ohne Stockfoto: ein Satz Positionierung in der Serif + aktuelle Insights/Studie als Einstieg (Noerr, Oppenhoff), alternativ ein echtes Teamfoto.
- Navigation nach Mandantenfrage: Leistungen/Rechtsgebiete, Branchen, Köpfe, Insights, Karriere, Kontakt; Mega-Menü ab 3 Bereichen mit je 5+ Einträgen.
- Serif ausschließlich für Überschriften und Zitate; alles Funktionale in der Grotesk mit 400/500.
- Jede Person mit Foto im einheitlichen Licht, Funktion, Fachgebiet, Sprachen, direktem Kontakt (Telefon/E-Mail als Link).
- Mandate und Insights mit Datum und Rubrik (Tabellenziffern), nicht als anonyme Kacheln.
- Ein Markenton + warme Graus; der helle Akzent nur für Links, Fokus und aktive Filter.
- Bei Steuerberatung zusätzlich: Mandantenportal/Upload-Link im Header, Fristen-Hinweise als Akkordeon.
- Footer mit allen Standorten (Adresse, Telefon), Impressum mit Kammer- und Berufsrechtsangaben.
- Erstgespräch als eigene Sektion vor dem Footer: kurzes Formular (Anliegen, Rechtsgebiet, Rückruf-Zeitfenster), Telefon, Mandantenportal-Link; Validierung erst nach Interaktion.
- Initiale (initial-letter) höchstens einmal pro Insight-Artikel, nie in Teasern oder Listen.
- Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Kammer, gesetzlicher Berufsbezeichnung und Staat der Verleihung, berufsrechtlichen Regelungen und Berufshaftpflichtversicherung; Mandate nur mit Einwilligung der Mandanten (Verschwiegenheit); keine Erfolgsversprechen; Rankings mit Jahr und Quelle; Kontaktformular mit Hinweis, dass noch kein Mandat entsteht – vom Kunden prüfen lassen.

## Rezept-Varianten

- **Kleine Kanzlei / Steuerberatung (3–10 Personen) – Standard für Templates**: 

## Vor der Abgabe

Checkliste in https://cecodesign.de/lab/fundus/leitfaden.txt, Abschnitt 12. Rechtliches immer „vom Kunden prüfen lassen“.