Praxis & Therapie: ruhig und zugewandt

Arztpraxis / Zahnarzt / Psychotherapie / Physiotherapie / Gesundheitsangebot

Kein klinisches Weiß-Blau: gedecktes Grün oder Petrol, warme Off-Whites und eine weiche Serif für Überschriften. Der Weg zum Termin ist auf jeder Seite einen Klick entfernt, Behandlungen und Ablauf sind in einfacher Sprache erklärt. Bewegung ist kurz, ruhig und selten; nur Bilder dürfen langsam überblenden.

Bauplan tokens.css Alle Techniken Beispielseite

Schrift

Ruhig und zugewandt

Kein klinisches Weiß-Blau: gedecktes Grün oder Petrol, warme Off-Whites und eine weiche Serif für Überschriften.

Headline: Hedvig Letters Serif
Text: Google Sans Flex

Farbe

#F5F7F7
#E2E0DE
#005450
#363B3B
#596666
#FFC776

Bewegung

cubic-bezier(0.2, 0, 0.38, 0.9)

Stil: Animationsstil „Tech präzise“ (Produkt-UI)
Dauer: 150–250 (Buttons, Links, Formular, Akkordeon), 400 (Einblendungen, max. 8 px Weg), 600–800 (Bild-Überblendung, einmalig)

Aufbau der Seite

SignaturHovercard / Vorschau per Interest Invoker

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · Split

Behandlungen / Wobei wir helfen (je Behandlung eine Unterseite, Antwort zuerst; Fachbegriffe per Klick als details oder Popover erklärt, Hovercard nur als Verbesserung)Akkordeon mit Höhenanimation auf auto · Leistungsliste Hovercard / Vorschau per Interest Invoker Leistungsseite: Antwort zuerst · Praxis Raster am Desktop, Wischreihe am Telefon · Einreihig
Termin online (Buchungs-Widget erst nach Consent bzw. Klick, sonst Telefon)Termin-Buchung per 2-Klick-Einbettung · Platzhalter
Ihr erster Termin – so läuft es abProzess-/Timeline-Sektion mit wachsender Linie
Team / Therapeut:innenTeam-/Über-mich-Layout mit Porträt-Interaktion · Raster
PraxisräumeNatives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Vollbild-Bühne Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Projektraster zu
Patientenstimmen / Bewertungen (nur echt, sachlich, mit Einwilligung und vom Kunden freigegeben; HWG und Berufsrecht; Google-Bewertungen nur mit Echtheitshinweis)Testimonials neu gedacht · Reihe Plattform-Bewertungen mit Echtheitshinweis · Kopfzeilen-Pille
Kurse (Rückenschule, Prävention, Reha-Sport; nur bei regelmäßigen Kursen, sonst Liste)Wochen-Kursplan mit Live-Status · Yoga- und Fitnessstudio
Kosten, Kassen, Rezept – FAQAkkordeon mit Höhenanimation auf auto · FAQ
Kontakt / Standorte (Liste nur ab zwei Praxen) / Anfahrt / Sprechzeiten (Rückruf oder Frage ohne Gesundheitsdaten als Pflichtfeld)Kontakt- und Anfrageformular als eigene Sektion Standortfinder als Liste · Nur Liste Öffnungszeiten mit Live-Status · Karte Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild
Erklärung zur Barrierefreiheit (eigene Seite)Seite „Barrierefreiheit“ als Vorlage · Erklärung

Navigation: Native Dropdowns mit Popover-API, Anchor Positioning und Invokern Mobile Bottom-Navigation und Bottom-Sheet-Menü · Kontaktleiste
Hover: Bild-Zoom in der Maske · Basis
Mikroanimation: Animierte Checkbox und Radio Fortschrittsring Ein-/Ausblenden mit @starting-style
Galerie: Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Vollbild-Bühne Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Projektraster zu
Footer: Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit) · Praxis
Buttons: Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)Pfeil-Icon-Button · Linie

Nicht verwenden

Konfetti / Erfolgs-Feier laut Katalog nicht im Gesundheitskontext; Terminbestätigung ruhig und klar
Rollende Ziffern (Zahlen-Ticker / Odometer) hochgezählte Patientenzahlen wirken unseriös
Marquee-Laufband (optional scroll-gekoppelt) Unruhe neben Texten, die Sicherheit geben sollen
smooth-scroll-lenis / jeder Custom-Cursor / magnetische-elemente – stört Menschen mit Einschränkungen und wirkt verspielt
Kinoreifer Vollbild-Video-Hero Stock-Ärzt:innen mit Stethoskop sind das Klischee; echte Fotos der Praxis
Scramble/Decode-Text (Zeichen entschlüsseln sich)Schreibmaschine mit natürlichem Takt technisch-kalt, gegen die Stimmung
Animierter Mesh-Verlauf Grain-/Noise-Überlagerung Effekt statt Ruhe

Regeln

Hero = echtes Foto (Praxis, Team) + ein Satz in einfacher Sprache + 'Termin vereinbaren' (Online-Buchung oder Telefon als tel:-Link); keine Stock-Ärzt:innen.
Termin-Button und Telefon im Header immer sichtbar, mobil in einer unteren Leiste (Anrufen / Termin / Anfahrt).
Behandlungen in Alltagssprache benennen ('Schlafprobleme' statt Fachbegriff) wie HelloBetters Indikationsliste; Fachbegriff als Unterzeile.
Hero-Zeile fest formuliert; keine wechselnden Wörter (automatisch bewegter Inhalt, WCAG 2.2.2, Patienten sähen womöglich nur das erste Wort).
Kosten und Kassenfragen offen beantworten (One Medical nennt den Preis offen); Selbstzahler-Preise als Ab-Preise.
Team mit einheitlichen, freundlichen Fotos, Qualifikation und Sprachen; bei Therapie zusätzlich Schwerpunkte.
Barrierearm: Schrift ab 17px, Kontrast ≥ 4.5:1, Fokus-Ringe sichtbar, Formulare mit klaren Fehlertexten erst nach Verlassen des Feldes.
Footer mit Sprechzeiten, Notfallhinweis (116 117 / 112), Anfahrt, Barrierefreiheit der Räume.
Fachbegriffe als Glossar: die Erklärung steht im Text bzw. FAQ und per Klick bereit (details oder Popover); hovercard-interest-invoker nur als Verbesserung für Maus und Fokus, nie als einziger Weg (wann_nicht: nicht für Pflichtinformationen, Langdruck auf Touch kollidiert mit dem Systemmenü).
Kontaktformular ohne Gesundheitsdaten als Pflichtfeld, Hinweis „Bitte keine Befunde senden“, verschlüsselt übertragen; Rezept- und Terminanfragen lieber über das Termin-Tool oder Telefon.
Pflichtangaben und Recht (Leitfaden 8a): Heilmittelwerbegesetz und Berufsordnung: Patientenstimmen nur echt, sachlich, mit schriftlicher Einwilligung und vom Kunden freigegeben; keine Heilversprechen, keine Erfolgsquoten, keine Vorher-nachher-Bilder bei operativen Eingriffen (§ 11 HWG); Impressum mit Kammer, Berufsbezeichnung, Staat der Verleihung und ggf. KV-Zulassung; Notfallhinweis 116 117 / 112; bei eigener Online-Terminbuchung Variante bfsg der Erklärung zur Barrierefreiheit prüfen – vom Kunden prüfen lassen.

Bild und Ton

Licht: Helles, weiches Tageslicht, warme Töne statt Kaltweiß.
Ausschnitt: Praxisräume, Empfang, Team im Gespräch mit Blickkontakt.
Personen: Ja: das echte Team, freundlich; keine Patient:innen in Behandlung.
Formate: 4:5, 3:2, 1:1
Nicht: Keine Stock-Ärzt:innen mit Stethoskop, kein Klinikblau, keine Zahnlächeln-Nahaufnahmen, keine Spritzen oder Instrumente.
Anrede: Sie
Sätze: Einfache Sprache, höchstens 15 Wörter je Satz, Alltagswort zuerst, Fachwort in Klammern.
Haltung: Ruhig und beruhigend, offen zu Kosten und Kassenfragen.
Tonproben: Sie haben Schmerzen? Rufen Sie an, wir suchen mit Ihnen einen Termin., Schlafprobleme (Insomnie): So läuft die Behandlung.
Nicht schreiben: „Ihre Gesundheit liegt uns am Herzen“, „schmerzfrei“, Angstmache über Folgen, wechselnde Wörter in der Headline.

Hero, Raum und Form

Hero-Raster: 12 Spalten: Text über Spalte 1 bis 6, Foto über 7 bis 12; mobil Foto unter der H1.
Hero-Bild: Echtes Praxis- oder Teamfoto, 4:5, mit 16 px Radius.
Überschrift: clamp(2.25rem, 1.4rem + 3.2vw, 4.5rem), Hedvig Letters Serif 400, links.
Handlung: „Termin vereinbaren“ (#005450 gefüllt, Pille) und Telefon als tel:-Link mit sichtbarer Nummer.
Zusatz: Sprechzeiten heute als Zeile; mobil untere Leiste Anrufen / Termin / Anfahrt.
Sektionsabstand: clamp(64px, 8vw, 120px)
Dichte: mittel
Raum: Ruhig und übersichtlich: Behandlungen als Liste mit 24 px Abstand, Formulare mit 20 px zwischen Feldern, Fließtext auf 62ch.
Spalten: 12
Maximale Breite: 1200px
Raster: Hero 6/6 (Text links, Foto rechts). Team als 3er-Raster, Behandlungen in einer Spalte mit Unterzeile.
Radius klein: 12px
Radius groß: 16px
Schatten: nur Hovercard und Popover: weich und flach in Grüngrau, sonst keiner
Form: Weich, aber klar: Pillen für Termin und Telefon, 16 px für Fotos und Karten (Demo hovercard-interest-invoker zeigt 12 und 16 px).

Vorbilder