Wie wird meine Kanzlei im KI-Zeitalter gefunden?

Indem Ihre Kanzlei sowohl in klassischen Suchmaschinen als auch in KI-Systemen wie ChatGPT und Perplexity als belastbare Quelle erscheint — durch klare Positionierung, strukturierte, gut auffindbare Inhalte und konsistente Profile. Legal Mind baut beide Ebenen auf.

Was ist der Unterschied zwischen Kanzleimarketing und KI in der Kanzlei?

Kanzleimarketing wirkt nach außen: Sichtbarkeit, Positionierung, Mandantengewinnung (Feld Business Development). KI in der Kanzlei wirkt nach innen: effizientere Abläufe, Wissensmanagement, anwaltliche Workflows (Feld Operations). Beide gehören zusammen.

Lohnt sich das für eine kleine oder mittlere Kanzlei?

Entscheidend ist nicht die Größe, sondern die Bereitschaft, in die eigene Position und in tragfähige Abläufe zu investieren. Wir beginnen mit einer Standortbestimmung und setzen dort an, wo der Hebel am größten ist.

Bleibt der KI-Einsatz berufsrechtskonform?

Das ist der Kern unserer Arbeit. Wir wählen Werkzeuge und Prozesse so, dass Verschwiegenheit, Haftung und DSGVO gewahrt bleiben — und sagen klar, wo KI nicht sinnvoll ist und eher schaden würde.

Design-System

Der Legal-Mind-Baukasten.

Die verbindliche Referenz für alle Seiten: Farben, Typografie, Buttons, Karten, Sektionsrhythmus und Animationen. Baust du eine neue Seite oder überarbeitest eine bestehende, spiegelst du exakt diese Bausteine — so bleibt die Konsistenz über die ganze Seite gewährleistet.
Vollständige Spezifikation: DESIGN.md.

Farben

Alle Tokens leben in global.css → :root. Nie hartkodierte Hex-Werte verwenden — immer die Variable.

Ink / Text (dunkel)

--ink #0a2540 Dark-Section-BG, Headlines

--ink-2 #0d2c4d Fließtext / Lede

--ink-soft #4a5a72 Meta, Captions

--ink-mute #8a96a8 Subtile Labels

Cream / Flächen (hell)

--cream #f5f1e8 Karten, Buttons hell

--cream-warm #faf6ec Standard-Section-BG

--cream-2 #ede8da Abgesetzte Flächen

--line #d8d2bf Linien / Divider

Gold (Akzent / Marke)

--gold #c4a572 Akzent, Gold-CTA, Sterne

--gold-soft #d4b889 Button-Hover

--gold-deep #a88758 Eyebrow-Linie, Hover

Sparten

--bd #87765e Business Development

--bd-tint #e8dcc0 BD-Kartenfläche

--ops #d3e1ec Operations (Himmelblau)

--ops-deep #265663 Operations dunkel

--petrol #205060 Conversion / LeadMagnet

Typografie

Serif (--serif) für Headlines & Pull-Quotes, Sans (--sans) für Body, Buttons, Labels.

.display serif · clamp(34–58px)

Damit Ihre Kanzlei erste Wahl bleibt.

.h2 serif · clamp(34–56px)

Vier Bausteine, die ineinandergreifen.

.eyebrow gold · 12px · 0.2em

Strategische Insights

Lede (VERBINDLICH) · clamp(16.5–19px) / 1.7 / --ink-2

Jeder Einleitungstext nach einer Headline nutzt exakt diese Größe — site-weit, Desktop 19px, Tablet/Mobile 16,5px. Keine sektionsindividuellen Größen.

Buttons

Ein Basis-Button .btn (padding 14/28, radius 999, 15px/500, immer zentriert) + Farb-Modifier. Standalone-CTAs sind überall gleich hoch (45px).

Zukunftscheck starten → .btn .btn-primary (auf hell → ink)

KI-Sichtbarkeitscheck starten → .btn .btn-gold (Conversion / Petrol-Sektion)

Mehr erfahren .btn .btn-ghost (sekundär, auf hell)

Zukunftscheck starten → Mehr erfahren

.btn-primary / .btn-ghost auf dunklem Hintergrund (bg-ink)

Textlinks in Sektionen (z. B. „Operations kennenlernen →") sind bewusst keine Buttons — unterstrichener Inline-Link, siehe .sys-allcta.

Karten

Randlos, getönt, weicher Schatten von Anfang an (kein Outline-Look), beim Hover verstärkt. Radius 18–22px.

Neutral · cream

Randlose Standardkarte

box-shadow: 0 16px 44px -28px rgba(10,37,64,.26); Hover: −3px + stärker.

Business Development

BD-Karte (--bd-tint)

Sandton für das Beratungsfeld Business Development.

Operations

Ops-Karte (--ops-tint)

Himmelblau für das Beratungsfeld Operations.

Chips / Tags:

Sektionsrhythmus & Trenner

Vertikaler Standardabstand clamp(110px, 14vw, 180px). Gleichfarbige Folge-Sektionen (cream→cream) werden durch eine dezente, einblendende Hairline getrennt (.section-divider) — Kapitel-Sektionen (BD/Operations) durch eine gold/petrol eingefärbte Variante.

.section-divider::before — 1px, Inhaltsbreite, weiche Enden, opacity 0.5

Editorial-Split (.sec-split)

Für reine „Überschrift + Untertext"-Sektionen: Headline links (auf Desktop sticky), Fließtext rechts (max 640px). Nutzt die volle Breite, konsistent mit der FAQ-Sektion.

Beispiel-Sektion

Überschrift links, sticky.

Der Fließtext steht rechts in lesbarer Breite und in der kanonischen Lede-Größe. Auf Mobile/Tablet stapelt die Anordnung sauber (Headline oben, Text darunter).

Animationen

Zentral über .reveal + globalen IntersectionObserver (Base.astro, threshold 0.08). Alle Animationen respektieren prefers-reduced-motion.

Reveal: .reveal / .reveal-scale / .stagger — sanftes Einblenden beim Scroll-in.
Section-Divider: Hairline blendet beim Hereinscrollen ein und bleibt.
Konstellation (BD/Operations): Linien zeichnen sich, Knoten poppen gestaffelt; Block-Hover ↔ Knoten-Nummer via :has([data-area]:hover).
Slider (Referenzen): translateX-Slide, Autoplay mit Pause bei Hover/Fokus, Swipe, Pfeile.
Coverflow (Kundenstimmen): fokussierte Mittelkarte, gedimmte Nachbarkarten, Pfeile.

Diese Seite ist noindex (nicht öffentlich indexiert) und dient als interne, lebende Referenz. Bei Änderungen am Design-System: erst DESIGN.md aktualisieren, dann hier spiegeln.