# Bauplan: Tierarztpraxis: zugewandt und klar

Rezept `tierarztpraxis` · Tierarztpraxis / Kleintierpraxis / Tierklinik / Pferdepraxis / mobile Tierärztin · Stimmung: zugewandt, ruhig, klar, warm · Stand 02.11.2026

Wer eine Tierarztseite öffnet, hat oft ein krankes Tier: Notdienst und heutige Sprechzeiten stehen deshalb im ersten Blick auf einer Karte im Foto, mobil in der unteren Leiste. Danach Tierarten mit dem ehrlichen Satz, was die Praxis nicht behandelt, Leistungen mit Antwort zuerst, Termin oder offene Sprechstunde, der erste Besuch, Kosten nach GOT verständlich, Team und Anfahrt. Young Serif rund und warm für Überschriften, Onest für Text. Hafer, Salbei und Tannengrün, ein Kürbiston nur für Termin und Anrufen. Signatur: eine kleine gezeichnete Figur, die in Rückruf-Formular, Leerzuständen und auf der Fehlerseite mitreagiert, nie im Notfallbereich. Eigenes Rezept statt der Variante Tierarztpraxis in praxis-gesundheit-ruhig, weil Tierhalter:innen eine wärmere Welt und andere Wege brauchen als Patient:innen.

## 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 `tierarztpraxis`) und https://cecodesign.de/lab/fundus/rezepte/tierarztpraxis/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt
- Starter-Seite (fertiges Beispiel nach diesem Rezept): https://cecodesign.de/lab/fundus/starter/tierarztpraxis/index.html

## Schrift

- Headline: `young-serif` · Text: `onest`
- Größen: h1 Young Serif clamp(2.25rem, 1.4rem + 3.6vw, 4rem), Laufweite -0.015em, Zeilenhöhe 1.05; h2 clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem). Fließtext Onest 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 64ch. Sprechzeiten, Notdienst und Gebühren Onest 500 mit Tabellenziffern. Knöpfe Onest 600, 1rem. Young Serif hat nur einen Schnitt; Hervorhebungen über Größe.
- Techniken: [Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten](https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/demo) `fluide-typo-clamp-cqi`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [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`

## Farbe

Warm und sauber: Hafer als Grund, helles Salbei als Fläche für Tierarten, Sprechzeiten und Kosten, Tannengrün für Notdienst-Karte und Footer. Ein Kürbiston nur für Termin und Anrufen. Notdienst ist Tannengrün mit weißer Schrift, nicht Alarmrot. Keine Pfoten-Ornamente, kein Knochen-Icon, kein Babyblau.

- `--farbe-grund` #F4EFE6 (Grund Hafer)
- `--farbe-text` #1F2421 (Text (13,8 : 1 auf Grund))
- `--farbe-flaeche` #DCE4DA (Fläche Salbei: Tierarten, Sprechzeiten, Kosten (Text 12,1 : 1))
- `--farbe-dunkel` #23403A (Dunkel Tanne: Notdienst-Hinweis im Hero, Footer (Weiß darauf 11,3 : 1))
- `--farbe-signal` #B4491B (Signal Kürbis: Termin, Anrufen (Weiß darauf 5,4 : 1; als Fläche auf Grund 4,7 : 1); auf Tanne stattdessen Hafer-Knopf mit dunkler Schrift)
- `--farbe-leise` #5C625D (Leise: Meta-Angaben, Stand-Daten (5,5 : 1 auf Grund, 4,8 : 1 auf Salbei))
- `--farbe-linie` #CFD3C9 (Linie: Haarlinien in Sprechzeiten (nur Dekoration))

## Bewegung

- Animationsstil: [Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)](https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/demo) `token-toggle-asymmetrisch`
- Kurve: cubic-bezier(0.16, 1, 0.3, 1) (token-toggle-asymmetrisch, öffnen); schließen cubic-bezier(0.7, 0, 0.84, 0)
- Dauer: 150 (Hover, Farbe), 300 (Reiter, Akkordeon, Dialog öffnen), 200 (schließen), 200 (Zustandswechsel der Figur), 2400 (Atmen der Figur, nur im Formular)
- Regel: Im Notfallbereich bewegt sich nichts. Reiter, Akkordeon und Dialoge öffnen schnell und schließen schneller. Die Figur wechselt Zustände nur bei Eingaben (wartet, schaut zum Feld, freut sich nach dem Senden) und atmet sonst kaum sichtbar; keine Dauerschleife außerhalb des Formulars. Bei prefers-reduced-motion steht die Figur in einer ruhigen Pose. Seit 05.11.2026: ein minimales Intro einmal je Sitzung (Register fächert auf), die Seite bleibt ab 0 ms bedienbar.
- Hinweis: Als Hauptstil gekürzt wie bei kfz-werkstatt-autohaus: öffnen 300 ms mit cubic-bezier(0.16, 1, 0.3, 1), schließen 200 ms mit der Anlauf-Kurve. Die Figur der Signatur atmet nur im Formular und auf der Fehlerseite und hat dort ihre eigenen, kleinen Werte aus maskottchen-zustaende; sie steht still, sobald jemand tippt.

## Bewegungs-Partitur (verbindlich, gemeinsame Regeln in rezepte.json → basis.bewegung_basis)

- Hauptkurve: `cubic-bezier(0.16, 1, 0.3, 1)` (--ease) für Reiter, Akkordeon, Dialoge: öffnen schnell, schließen schneller; Ausnahme `cubic-bezier(0.45, 0, 0.2, 1)` nur für nur Seitenwechsel: weich hinein und hinaus, ohne Überschwingen (ruhig heißt weich, nicht kurz)
- Dauern: klein 150 ms, mittel 300 ms, gross 300 ms, seitenwechsel 560 ms, schliessen 200 ms (als `--dauer-klein` … in tokens.css)

**Laden der Startseite** (Kopf und Haupthandlung stehen ab 0 ms und sind bedienbar):

1. Kopf mit Notfall-Nummer: ab 0 ms, steht
2. Hero-Foto mit Karte (Notfall, Zeiten): ab 0 ms, steht; im Notfallbereich bewegt sich nichts (Rezept)
3. Moment: Register der Tierarten: ab 120/180/240/300 ms, 560 ms, einmal je Sitzung: Reiter fächern aus dem Stapel auf (höchstens 24 px Weg, --ease-seite); Notfall-Karte steht
- Ende nach 860 ms. Wiederholt: alles steht.
- Minimales Intro (05.11.2026, Jury-Lehre): Die Seite ist ab 0 ms bedienbar und steht; nur der Moment (rezept.moment) läuft einmal je Sitzung (sessionStorage), Klick, Taste oder Scroll beenden ihn sofort im Endzustand. Wiederholt steht alles.

**Scrollen** (höchstens drei Reveal-Arten):

- keine Reveals
- Fortschritt: keine
- Steht immer: Fließtext, Formulare und Felder, Preise, Tarife, Kosten, Öffnungszeiten, Telefon, Adresse, Tabellen und Datenblätter, Rechtstexte und Pflichtangaben, Kopf und Navigation, Fehlermeldungen, Hinweise, Notdienst, Notfallbereich, Sprechzeiten und Telefon, Kosten nach GOT

**Hover** (300 ms ein, 200 ms aus, --ease-ein / --ease-aus; nur mit Zeiger):

- Link: Unterstreichung wird kräftiger
- Knopf: fuellung-vom-eintrittspunkt basis; pfeil-icon-button linie
- Karte: karte-ganzflaechig-klickbar raster: Pfeil 4 px
- Bild: kein Zoom

**Signatur** `maskottchen-zustaende`: Die Figur wechselt Zustände nur bei Eingaben im Formular (wartet, schaut zum Feld, freut sich nach dem Senden; Übergang 200 ms). Sie atmet nur im Formular und auf der Fehlerseite (Zyklus 2400 ms), höchstens zwei Zyklen, dann Ruhe-Pose; sie steht still, sobald jemand tippt. Auslöser: Eingabe, Absenden; Wiederholung: je Zustandswechsel; Atmen höchstens 4,8 s.

**Seitenwechsel** `vt-cross-document-mpa` (Variante typen). Richtung: vor: neue Seite zieht wie eine Karteikarte 24 px von unten nach und deckt, alte sinkt 8 px; zurück gespiegelt; keine Federn. Geteilt: kopf, reiter (Register-Reiter bzw. Menüpunkt → Kopf der Unterseite). Dauer 560 ms. Kurve: `--ease-seite cubic-bezier(0.45, 0, 0.2, 1)`.

**Budget:** Eine Signatur-Bewegung je Ansicht. Höchstens drei Reveal-Arten je Seite, nur in benannten Sektionen. Höchstens eine Fortschrittsanzeige je Seite. Kein Parallax auf Text. Parallax auf Bildern höchstens 10 % Weg. Keine Bewegung über 5 s ohne Pause-Knopf, nichts in Schleife ohne Eingabe. Höchstens zwei Dinge bewegen sich zugleich im Blickfeld (die Zeilen einer Überschrift zählen als eins). Rückmeldung auf Eingaben nie über 500 ms. Überschwingen nur auf kleinen Elementen (B6). Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1). Im Notfallbereich bewegt sich nichts (Rezept). Atmen der Figur höchstens zwei Zyklen (eigene Festlegung, sonst Bewegung über 5 s).

**Reduzierte Bewegung:** Figur in ruhiger Pose (Rezept); Reiter und Dialoge ohne Weg; Seitenwechsel als Überblendung. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Pfoten-Spuren, die über die Seite laufen; Herzschlag-Linie; wackelnde Tiere; Konfetti (Rezept).

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms, regel und animationsstil_hinweis; Figur nach maskottchen-zustaende (Übergang 200 ms). Begrenzung des Atmens eigene Festlegung.

## 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, 88, 120
- Sektionsabstand: clamp(64px, 8vw, 120px)
- Dichte: mittel
- Hinweis: Ruhig und übersichtlich: Sprechzeiten dicht, Tierarten mit großzügigen Reitern, Notdienst-Karte mit 24 px Innenabstand.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 56px)
- Spaltenabstand: clamp(16px, 2vw, 28px)
- Maximale Breite: 1240px
- Raster: Hero-Foto über 12 Spalten mit Karte unten links über 5 Spalten. Leistungen als zweispaltige Liste, Formular 6/6 mit der Figur rechts.
- Radius klein: 8px
- Radius groß: 20px
- Pillenform für Buttons: False
- Linie: 1px #CFD3C9 in Sprechzeiten; Felder 1px in Leise (3:1)
- Schatten: keiner
- Form: Weich gerundet, freundlich; Notdienst-Karte mit 20 px Radius in Tanne.

## Bildsprache

- Licht: Helles Tageslicht im Behandlungsraum, warm, nicht klinisch kalt.
- Ausschnitt: Hände am Tier, Tier auf Augenhöhe, Team in der Halbtotale; keine OP-Szenen mit Blut.
- Personen: Ja: Team mit Einwilligung; Tiere der Kundschaft nur mit Einwilligung der Halter:innen.
- Formate: 3:2, 4:5, 1:1
- Nicht: Keine Stockfotos mit Welpen und Stethoskop, keine verletzten Tiere, keine Vorher-nachher-Bilder.
- Gewicht: Wenige Bilder, groß: lieber ein Bild randlos oder über 7 bis 12 Spalten als drei mittelgroße; jedes Bild trägt eine Aussage, keins füllt nur Platz. Zeichnungen kräftig und groß als eigene Bildwelt: Strich ab 2,5 px, Flächen in den Rezeptfarben, mindestens 160 px, nie als dünne Strich-Icons.

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

- Anrede: Sie
- Sätze: Kurz und beruhigend, konkret: was jetzt zu tun ist, was es kostet, wie lange es dauert.
- Haltung: Zugewandt wie am Empfang, ehrlich bei Kosten und Grenzen.
- Tonproben: Notdienst heute bis 22 Uhr. Bitte rufen Sie vorher an., Reptilien behandeln wir nicht. Die nächste Fachpraxis ist [Name] in [Ort].
- Nicht: „Ihr Liebling in besten Händen“, „wir heilen“, Verniedlichungen bei ernsten Themen.

## Hero

Foto-Hero mit Karte (foto-hero-mit-leiste, Variante karte): echtes Foto aus der Praxis (Tierärztin mit Hund im Behandlungsraum, mit Einwilligung der Halter:in). Unten links eine deckende Karte in Tannengrün: heute geöffnet bis, Notdienst heute mit Nummer oder Verweis auf den regionalen tierärztlichen Notdienst, Hinweis auf Notdienstgebühren. Daneben „Termin“ und „Anrufen“. Kein Stockfoto mit Welpe und Stethoskop.

- Raster: Foto randlos über 12 Spalten; Notdienst-Karte unten links über Spalte 1 bis 5; H1 und Wege oben links; mobil Foto oben, Karte darunter in voller Breite.
- Bild: Echtes Praxisfoto mit Tier und Team, 3:2 Desktop, 4:5 mobil.
- Überschrift: clamp(2.25rem, 1.4rem + 3.6vw, 4rem), Young Serif; Praxisname oder ein Satz zur Praxis, kein Label darüber.
- Handlung: „Termin“ (Kürbis gefüllt) und „Anrufen“ als tel:-Link mit sichtbarer Nummer.
- Zusatz: Notdienst-Karte in Tanne mit Status und Gebührenhinweis; mobil untere Leiste Anrufen / Notdienst / Termin.

- Hero: [Foto-Hero mit Leiste, Karte oder Weiche](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=karte) `foto-hero-mit-leiste` · Variante „Karte mit Öffnungsstatus“

## Sektionen in dieser Reihenfolge

1. **Notfall? (auf jeder Seite erreichbar: eigene Notdienstzeiten mit Nummer oder der regionale tierärztliche Notdienst; Notdienstgebühr und Reihenfolge nach Dringlichkeit vorab gesagt; an Feiertagen als seitenweite Leiste)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=hinweisleiste) `oeffnungszeiten-status` · Variante „Hinweisleiste über dem Kopf“, [Notdienst mit Plan und Verweis](https://cecodesign.de/lab/fundus/sektionen/notdienst-plan/demo?v=tierarzt) `notdienst-plan` · Variante „Tierarzt im Notdienstring“
2. **Tierarten (Reiter Hund und Katze, Heimtiere, Vögel und Reptilien, Pferd; je Reiter was behandelt wird und der ehrliche Satz, was nicht, mit Hinweis, wohin man sonst geht)**: [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“
3. **Leistungen (Vorsorge und Impfung, Kastration, Zahnbehandlung, Chirurgie, Röntgen und Ultraschall, Labor, Ernährungsberatung; je Leistung eine Unterseite, Antwort zuerst: was gemacht wird, wie lange, ungefährer Kostenrahmen nach GOT)**: [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“
4. **Termin oder offene Sprechstunde (Buchungs-Widget erst nach Klick, Grund des Besuchs als Auswahl, Telefon daneben; offene Sprechstunde mit Zeiten)**: [Termin-Buchung per 2-Klick-Einbettung](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=vorauswahl) `termin-buchung-zwei-klick` · Variante „Vorauswahl vor dem Laden“
5. **Der erste Besuch (Impfpass und Vorbefunde mitbringen, Katzen in der Transportbox, nüchtern vor Narkosen, getrennter Wartebereich nur, wenn es ihn gibt; Ablauf in vier Schritten)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo) `prozess-timeline-wachsende-linie`
6. **Was kostet das? (GOT verständlich: Gebührenrahmen, Notdienst mit erhöhtem Satz und Notdienstgebühr, Kostenvoranschlag vor größeren Eingriffen, Zahlung, Tierkrankenversicherung; Ratenzahlung nur mit allen Pflichtangaben)**: [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“, [Finanzierung mit Pflichtangaben und Warnhinweis](https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/demo?v=rechner) `finanzierung-pflichtangaben` · Variante „Ratenrechner mit Laufzeit-Regler“
7. **Team (Tierärzt:innen und TFA mit Foto, Schwerpunkt, Sprachen; eigene Tiere nur, wenn sie mögen)**: [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“
8. **Person-Detailseite (je Person eine Seite, aufgerufen aus dem Team: Tierärztin oder TFA mit Schwerpunkt, Tierarten, Zusatzqualifikation, Sprachen und Sprechtagen; Notdienst-Hinweis zuerst; Foto nur echt und mit Einwilligung, sonst markierter Platzhalter)**: [Personen-Detailseite](https://cecodesign.de/lab/fundus/sektionen/person-detailseite/demo?v=aerztin) `person-detailseite` · Variante „Ärztin“
9. **Stimmen (sachlich über Umgang, Erklärung und Wartezeit, nie über Heilerfolge; Google-Bewertungen nur mit Echtheitshinweis)**: [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=stimmen-reihe) `testimonials-neu-gedacht` · Variante „Stimmen-Reihe mit Höhe der aktiven Stimme“, [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille) `bewertungsprofil-mit-echtheitshinweis` · Variante „Kopfzeilen-Pille“
10. **Rückruf und Frage (Name, Telefon, Tierart, Anliegen als Auswahl; Befunde und Bilder nicht über das Formular; die Figur reagiert auf Eingabe, Senden und Erfolg; im Notfall Telefon statt Formular)**: [Figuren-/Maskottchen-Zustände](https://cecodesign.de/lab/fundus/mikroanimationen/maskottchen-zustaende/demo) `maskottchen-zustaende`, [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo?v=basis) `kontakt-anfrage-formular` · Variante „Anfrage-Sektion mit drei Formularen“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt) `formular-fehlerzusammenfassung` · Variante „Kompakt über dem Knopf“
11. **Praxis, Sprechzeiten, Anfahrt (Sprechzeiten mit Status, Parken vor der Tür, Eingang für Hunde und Boxen als Skizze, Hausbesuche und Einzugsgebiet bei Pferden; Karte per 2-Klick)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte) `oeffnungszeiten-status` · Variante „Sprechzeiten-Karte“, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=skizze) `karte-zwei-klick` · Variante „Lageskizze“, [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=zahnarzt) `firmendaten-strukturiert` · Variante „Zahnarztpraxis (Dentist)“
12. **Arbeiten bei uns (TFA, Tierärzt:in, Ausbildung; Notdienste und Wochenenden ehrlich)**: [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=wenige) `stellen-karriere` · Variante „Wenige Stellen“
13. **Erklärung zur Barrierefreiheit (eigene Seite; bei Online-Termin nach BFSG prüfen lassen)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Figuren-/Maskottchen-Zustände](https://cecodesign.de/lab/fundus/mikroanimationen/maskottchen-zustaende/demo) `maskottchen-zustaende`

## Moment (Pflicht: woran man sich erinnert)

- Was: Das Register der Praxis: die Tierarten stehen als große Reiter mit kräftigen Zeichnungen (Hund und Katze, Heimtiere, Vögel und Reptilien, Pferd), sie fächern sich einmal je Sitzung auf; ein Reiter öffnet, was behandelt wird. Freundlich, groß, nicht verspielt.
- Wo: Startseite, zweiter Bildschirm
- Gewicht: groß und interaktiv: Reiter über 12 Spalten, Zeichnungen mindestens 160 px
- Muster: [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“, [Figuren-/Maskottchen-Zustände](https://cecodesign.de/lab/fundus/mikroanimationen/maskottchen-zustaende/demo) `maskottchen-zustaende`
- Bei ruhigen Rezepten heißt ruhig langsam und groß, nicht unsichtbar. Läuft der Moment von selbst, dann einmal je Sitzung; die Seite ist ab 0 ms bedienbar.

## Buttons

- Haupthandlung: [Füllung vom Eintrittspunkt](https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=basis) `fuellung-vom-eintrittspunkt` · Variante „Clip-Path-Formen (Tischlerei)“
- Nebenhandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=linie) `pfeil-icon-button` · Variante „Linie (Stripe)“

## Weitere Bausteine

- Navigation: [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=kontakt) `mobile-bottom-navigation` · Variante „Kontaktleiste (Elektrobetrieb)“, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“
- Hover: [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
- Mikroanimation: [Figuren-/Maskottchen-Zustände](https://cecodesign.de/lab/fundus/mikroanimationen/maskottchen-zustaende/demo) `maskottchen-zustaende`, [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`, [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis) `studio-visitenkarte-footer` · Variante „Praxis mit Sprechzeiten und Anfahrt“

## 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?v=zahnarzt) `firmendaten-strukturiert` · Variante „Zahnarztpraxis (Dentist)“
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`
- [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo) `danke-seite-naechste-schritte`
- [Rechtstexte lesbar setzen](https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo) `rechtstext-layout`
- [Favicon-Satz und Teilbild je Seite](https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/demo?v=satz) `favicon-teilbild-system` · Variante „Favicon-Satz“
- [Druckansicht als System](https://cecodesign.de/lab/fundus/zugang/druckansicht-print/demo?v=rechtstext) `druckansicht-print` · Variante „Rechtstext“

## Nicht verwenden

- hovercard-interest-invoker – Signatur von praxis-gesundheit-ruhig; Fachwörter stehen per details aufklappbar
- vorher-nachher-vergleichsregler – Vorher-nachher-Bilder von Behandlungen sind werberechtlich heikel und Signatur von handwerk
- konfetti-erfolg – im Gesundheitskontext billig; die Figur freut sich leise
- zahlen-odometer – keine hochgezählten Patientenzahlen
- marquee-laufband – unruhig neben Notdienst und Zeiten
- smooth-scroll-lenis – verzögert den Weg zum Notdienst
- cursor-follower-lerp / magnetische-elemente – Agentur-Gesten
- corner-shape-eckenformen – Signatur von pflege-dienst-naehe
- Pfoten- und Knochen-Ornamente, Stockfotos mit Welpe und Stethoskop – eigene Fotos aus der Praxis
- Heilversprechen und Erfolgsquoten – Heilmittelwerbegesetz gilt auch bei Tieren

## Regeln

- Erster Bildschirm: Praxisfoto mit Notdienst-Karte (heute geöffnet bis, Notdienst heute, Gebührenhinweis), Termin und Anrufen. Mobil untere Leiste Anrufen / Notdienst / Termin.
- Signatur (maskottchen-zustaende): eine kleine, gezeichnete Figur (Hund oder Katze, in Tannengrün und Kürbis) nur im Rückruf-Formular, in Leerzuständen und auf der Fehlerseite. Zustände: wartet, schaut zum aktiven Feld, freut sich nach dem Senden, ist traurig bei Fehlern, aber nie spöttisch. Nie im Notfallbereich, nie über Inhalten, keine Dauerschleife; bei reduzierter Bewegung eine ruhige Pose.
- Notdienst: eigene Notdienstzeiten mit Nummer oder der Verweis auf den regionalen tierärztlichen Notdienst; vorab sagen, dass im Notdienst mindestens der zweifache Gebührensatz und eine Notdienstgebühr anfallen (GOT) und die Reihenfolge nach Dringlichkeit geht. Beträge vom Kunden prüfen lassen.
- Tierarten ehrlich: Je Reiter, was nicht behandelt wird und wohin man stattdessen geht.
- Kosten nach GOT: Gebührenrahmen und Beispiele mit Stand-Datum, Kostenvoranschlag vor größeren Eingriffen; Ratenzahlung nur mit effektivem Jahreszins und Warnhinweis direkt dabei (finanzierung-pflichtangaben, ab 20.11.2026).
- Heilmittelwerbegesetz und Arzneimittel: keine Heilversprechen, keine Erfolgsquoten, keine Werbung für verschreibungspflichtige Tierarzneimittel gegenüber Tierhalter:innen (§ 10 HWG, Tierarzneimittelrecht); Stimmen nur über Umgang und Service. Vom Kunden prüfen lassen.
- Formular ohne Befunde: Name, Telefon, Tierart, Anliegen als Auswahl; Befunde und Röntgenbilder über einen sicheren Weg, nicht per Formular. Im Notfall Telefon zuerst.
- Fotos von Tieren der Kundschaft nur mit Einwilligung der Halter:innen, Personen erkennbar nur mit eigener Einwilligung.
- Impressum mit Berufsbezeichnung, zuständiger Tierärztekammer, Aufsichtsbehörde und Link zur Berufsordnung; firmendaten-strukturiert als VeterinaryCare. Vom Kunden prüfen lassen.
- Knöpfe: Kürbis gefüllt (fuellung-vom-eintrittspunkt, Variante basis) für Termin und Anrufen; Nebenwege als ruhiger Textlink mit Pfeil (pfeil-icon-button, Variante linie). Alle Zustände nach button-zustaende.

## Rezept-Varianten

- **Pferdepraxis und mobile Tierärztin (fahrende Praxis)**: Schrift, Farbe, Stil und Signatur bleiben. Statt Praxisräumen das Einzugsgebiet: Postleitzahl zuerst („Kommen wir zu Ihnen?“) mit mehrschritt-anfrage (Variante plz), Anfahrtspauschale offen nach GOT, Notdienst am Stall mit Nummer. Termine als Anfrage mit Stall, Anzahl der Tiere und Wunschzeitraum. Fotos aus Ställen nur mit Einwilligung der Eigentümer:innen.

## Vor der Abgabe

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