Cormorant Garamond · Medium
Veränderung beginnt im Inneren.
Headlines: 112 / 66 / 27 px
Mobile: 78 / 46 / 24 px
Zeilenhöhe Titel: 1.06
Designgrundlagen · Version 03 · Persönlich & ausdrucksstark
Persönlich. Mit Haltung.
Persönlich und ausdrucksstark: Weiss, tiefes Bordeaux und zartes Rosé. Ausdrucksstarke Serifentitel treffen auf klare Lesetexte. Ein nah aufgenommenes Beratungsmotiv schafft persönliche Nähe. Ein echtes Portrait ergänzt später die Vorstellung.
01 · Farben
Weiss
#FFFFFF
#FFFFFF
Helles Rosé
#F8EDF0
#F8EDF0
Puderrosa
#EFDAE2
#EFDAE2
Text / Schwarz
#2F1722
#2F1722
CTA / Bordeaux
#651C36
#651C36
Sekundärer Text
#69545E
#69545E
Trennlinien
#DAC7CE
#DAC7CE
Eingabefelder
#FFFFFF
#FFFFFF
02 · Typografie & Layout
DM Sans · Regular / Medium
Ihre Fragen und Grenzen haben jederzeit Platz.
Lesetext: 17 px · Karten: 15 px
Metadaten: 11–13 px · Zeilenhöhe: 1.65
Maximale Seitenbreite: 1440 px
Desktop-Innenabstand: 5 vw
Mobile-Innenabstand: 22 px
Abschnittsabstand: 112 / 66 px
Themenliste: feine Linien, nummerierte Zeilen
03 · Komponenten
Buttons & Textlink
Erstgespräch vereinbaren ↗Hypnosetherapie kennenlernen
Anwendungsbereiche entdecken ↓
Primär, Sekundär, Hover und Tastaturfokus. Mindesthöhe 48 px; primär 54 px.
Themenzeile
Stress & innere Unruhe
Zur Ruhe kommen und einen bewussteren Umgang mit Belastungen entwickeln.
FAQ Accordion
Geschlossener Zustand
Die Antwort wird auf Klick oder mit der Tastatur eingeblendet.
Geöffneter Zustand
Kurze, gut lesbare Antworten. Semantische details- und summary-Elemente unterstützen die Tastaturbedienung.
Form Fields
Sichtbare Labels, deutlicher Fokus, native Validierung. Optionale Felder werden gekennzeichnet.
Testimonial Card
Kundenstimme / Platzhalter
Nur echte, freigegebene Rückmeldungen einsetzen. Bis dahin bleibt die Kennzeichnung sichtbar.
Section Heading
Anwendungsbereiche
Was beschäftigt Sie?
Kleine Rubrik, ausdrucksstarker Titel, optionaler kurzer Einführungstext.
04 · Zusammengesetzte Bereiche
Navigation · Footer · CTA Section · Kontaktformular sind in der vollständigen Homepage ↗ dargestellt. Die Mobilnavigation öffnet unter 760 px; Karten und Formularspalten werden untereinander angeordnet.
05 · Redaktionelle Übergabe
Vor Veröffentlichung ersetzen: Praxisname, Portrait, Biografie, Ausbildung, Qualifikationen, Spezialisierungen, Kontaktdaten. FAQ fachlich prüfen und tatsächliche Dauer und Konditionen ergänzen. Rechtstexte passend zur Praxis erstellen. Das Beratungsmotiv ist generiert und zeigt keine echte Praxisperson. Das Formular ist bewusst ohne Versand oder Speicherung.