# Bauplan: Hundeschule und Tierbetreuung: draußen, klar, freundlich

Rezept `hundeschule-tierbetreuung` · Hundeschule / Hundetrainer:in / Hundetagesstätte / Hundepension / Gassi-Service / Hundesalon (Tierbetreuung mit Erlaubnis nach § 11 TierSchG) · Stimmung: draußen, klar, freundlich, tatkräftig · Stand 02.11.2026

Hundehalter:innen wollen wissen: Welcher Kurs passt zu meinem Hund, wann ist der nächste Termin, gibt es noch Plätze, wie arbeitet ihr? Deshalb stehen Kurse mit freien Plätzen gleich nach dem Hero, die Haltung zur Methode ist ehrlich und konkret (belohnungsbasiert, ohne Stachel-, Würge- oder Elektrohalsband), Trainer:innen mit Qualifikation und Erlaubnis, Preise als Kurs- und Mehrfachkarten, dazu Tagesstätte und Pension mit Probetag. Anybody mit breiter Achse für Überschriften, Zalando Sans für Text. Kies, Taubenblau und Dämmerblau, Apportiergelb nur für „Anmelden“. Signatur: mit Hundeaugen. Hunde sehen vor allem Blau und Gelb; Kursbilder und Trainer:innen stehen in diesem Duoton und bekommen beim Zeigen (auf dem Telefon in der Bildmitte) ihre volle Farbe zurück (graustufen-zu-farbe). Die Palette folgt derselben Idee: kein Grün, kein Rot.

## 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 `hundeschule-tierbetreuung`) und https://cecodesign.de/lab/fundus/rezepte/hundeschule-tierbetreuung/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `anybody` · Text: `zalando-sans`
- Größen: h1 Anybody clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem), wdth 125, wght 800, Laufweite -0.02em, Zeilenhöhe 0.95; Kapitel-H2 clamp(1.75rem, 1.2rem + 2.2vw, 3rem), wdth 115, wght 750. H3, Kursnamen und Gebrauchsüberschriften Zalando Sans 650, 1.25rem. Fließtext Zalando Sans 1.0625rem (17 px), wght 400, Zeilenhöhe 1.58, höchstens 64ch. Termine, Plätze und Preise Zalando Sans 500 mit Tabellenziffern. Knöpfe Zalando Sans 650, 1rem.
- 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`, [Silbentrennung für deutsche Komposita](https://cecodesign.de/lab/fundus/typo-techniken/silbentrennung-komposita/demo) `silbentrennung-komposita`

## Farbe

Mit Hundeaugen: nur Blau, Gelb und Neutraltöne, so wie Hunde Farben sehen. Kies als Grund, Taubenblau als Fläche für Kurse, Termine und Preise, Dämmerblau für Kapitel und Fuß. Apportiergelb nur für „Anmelden“, immer mit dunkler Schrift und Rand in Textfarbe. Kein Grün, kein Rot, keine Pfoten-Ornamente.

- `--farbe-grund` #F3F1EC (Grund Kies)
- `--farbe-text` #1B1F2A (Text (14,6 : 1 auf Grund))
- `--farbe-flaeche` #DCE3F0 (Fläche Taubenblau: Kurse, Termine, Preise (Text 12,8 : 1))
- `--farbe-dunkel` #1F2F5C (Dunkel Dämmerblau: Kapitel, Footer (Weiß darauf 13,0 : 1, Apportiergelb darauf 7,7 : 1))
- `--farbe-signal` #F2C230 (Signal Apportiergelb: Anmelden (Text darauf 9,8 : 1; auf Kies nur 1,5 : 1, deshalb Knopf mit 2 px Rand in Textfarbe))
- `--farbe-leise` #585E6B (Leise: Termine, Stand-Daten (5,8 : 1 auf Grund, 5,1 : 1 auf Taubenblau))

## Bewegung

- Animationsstil: [Animationsstil „Federnd verspielt“](https://cecodesign.de/lab/fundus/animationsstile/token-federnd-verspielt/demo) `token-federnd-verspielt`
- Für UI: [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.34, 1.56, 0.64, 1) (token-federnd-verspielt, nur kleine Elemente); UI über animationsstil_ui
- Dauer: 150 (Hover, Farbe), 400 (Knopf und Häkchen federn), 300 (Reiter, Akkordeon, Dialog öffnen), 200 (schließen), 500 (Duoton wird Farbe), 800 (Seitenwechsel als Kreis vom Bild, zurück 540)
- Regel: Termine, Plätze und Preise stehen sofort. Federn nur auf Knopf, Häkchen und Platz-Zähler, nie auf Fotos, Flächen oder Deckkraft. Kursbilder und Trainer:innen stehen im Blau-Gelb-Duoton und bekommen beim Zeigen in 500 ms ihre Farbe; auf Touch, wenn das Bild die Mitte des Bildschirms erreicht, einmal. Seitenwechsel: ein Kreis öffnet sich am angeklickten Bild. Bei prefers-reduced-motion stehen alle Bilder in Farbe, Seitenwechsel als Überblendung.
- Hinweis: Federn nur als Belohnung auf kleinen Elementen: Anmelde-Knopf beim Druck, Häkchen „Platz reserviert“, Platz-Zähler. Fotos, Flächen, Reiter und Formulare laufen über das UI-Paar ohne Überschwingen; der Duoton-Wechsel läuft mit --ease-flaeche.

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

- Hauptkurve: `cubic-bezier(0.34, 1.56, 0.64, 1)` (--ease) für nur kleine Elemente (Anmelde-Knopf, Häkchen, Platz-Zähler); Fotos, Duoton, Reiter, Formulare und Seitenwechsel ohne Überschwingen; UI: `cubic-bezier(0.16, 1, 0.3, 1)` / `cubic-bezier(0.7, 0, 0.84, 0)`; Ausnahme `cubic-bezier(0.76, 0, 0.24, 1)` nur für nur den Kreis beim Seitenwechsel (seitenwechsel-wachsende-form, klickpunkt); alle anderen Flächen nehmen --ease-flaeche
- Dauern: klein 150 ms, mittel 300 ms, gross 500 ms, seitenwechsel 800 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 Anmelden und Telefon: ab 0 ms, steht
2. Hero-Foto (in Farbe): ab 0 ms, steht (LCP)
3. H1 (zwei Zeilen): ab 0/80 ms, 500 ms, Breitenachse wdth 100 → 125 und Zeilenmaske, --ui-ease-ein; Breite erst, wenn die Schrift geladen ist
4. Nächste Kurse mit freien Plätzen: ab 0 ms, steht
- Ende nach 580 ms. Wiederholt: H1 steht in voller Breite (sessionStorage).

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

- Duoton wird Farbe (nur Touch) (`graustufen-zu-farbe`): Kurskarten, Trainer:innen, Haltung; 500ms, Versatz 0 ms, Duoton-Ebene Deckkraft 1 → 0, einmal je Bild; Bild erreicht die Mitte des Bildschirms (IntersectionObserver, rootMargin -45 %), nur bei hover: none
- 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, Termine und freie Plätze, Preise, Impf- und Haftpflichthinweise

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

- Link: Unterstreichung wächst von links (unterstreichung-varianten durchlauf)
- Knopf: button-zustaende: Gelb mit Rand, beim Druck federt der Knopf 400 ms mit --ease; pfeil-icon-button seitenwechsel: Kreis wandert zur anderen Seite
- Karte: karte-ganzflaechig-klickbar raster: Duoton wird Farbe, Pfeil 4 px
- Bild: Duoton wird Farbe (graustufen-zu-farbe), kein Zoom

**Signatur** `graustufen-zu-farbe`: Mit Hundeaugen: Kurs- und Trainerbilder stehen im Blau-Gelb-Duoton (SVG-Filter, Verlauf Dämmerblau → Apportiergelb). Beim Zeigen oder Fokus wird das Bild in 500 ms farbig; auf Touch einmal, wenn es die Bildschirmmitte erreicht. Eine kleine Zeile unter dem ersten Bild erklärt es: „So ungefähr sieht Ihr Hund die Welt.“ Auslöser: Zeiger oder Fokus; auf Touch Bildschirmmitte; Wiederholung: je Zeigen; auf Touch einmal je Bild.

**Seitenwechsel** `seitenwechsel-wachsende-form` (Variante klickpunkt). Richtung: vorwaerts: der Kreis öffnet sich am angeklickten Kursbild bis zur fernsten Ecke, die alte Seite tritt auf Deckkraft 0,5 zurück; zurueck: der Kreis schließt sich in dieses Bild; Tastatur: Kreis aus der Mitte des Links. Geteilt: kopf, kursbild (Klickpunkt → Kopfbild der Kursseite). Dauer 800 ms, zurück 540 ms. Kurve: `cubic-bezier(0.76, 0, 0.24, 1) (--ease-kreis)`.

**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). Federn nie auf Fotos, Flächen oder Deckkraft (Rezept). Höchstens ein farbig werdendes Bild zugleich; die Nachbarn bleiben im Duoton. Der Kreis ist eine Fläche: ohne Überschwingen, nie --ease.

**Reduzierte Bewegung:** Alle Bilder in Farbe ohne Duoton-Wechsel; H1 in voller Breite; Knopf ohne Federn; Seitenwechsel als Überblendung 150 ms ohne Kreis. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Pfotenspuren, die über die Seite laufen; wedelnde oder springende Hunde-Animationen; Knochen-Cursor, Konfetti.

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms, regel und animationsstil_hinweis; Duoton nach graustufen-zu-farbe (500 ms), Kreis nach seitenwechsel-wachsende-form (klickpunkt: 800/540 ms, cubic-bezier(0.76, 0, 0.24, 1)). Begrenzungen 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, 96, 136
- Sektionsabstand: clamp(64px, 8vw, 136px)
- Dichte: mittel
- Hinweis: Kräftig und luftig: Kurskarten mit 24 px Innenabstand, Termine dicht, Haltung mit viel Raum neben dem Bild.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 56px)
- Spaltenabstand: clamp(14px, 2vw, 28px)
- Maximale Breite: 1280px
- Raster: Hero randlos über 12 Spalten, Text unten links über 7. Kurse als drei ungleich breite Karten (5/4/3) am Desktop, auf dem Telefon untereinander; Haltung 6/6 sticky.
- Radius klein: 12px
- Radius groß: 28px
- Pillenform für Buttons: True
- Linie: 2px #1B1F2A am gelben Knopf; Felder 1px in Leise (3:1)
- Schatten: keiner
- Form: Rund und griffig wie ein Ball: Knöpfe als Pille, Karten 28 px; der gelbe Knopf trägt immer den dunklen Rand.

## Bildsprache

- Licht: Draußen, Tageslicht, gern Gegenlicht am Morgen; kein Studio.
- Ausschnitt: Augenhöhe des Hundes, Hund und Mensch in Bewegung, Hände mit Leckerli, Gruppe in der Totalen.
- Personen: Ja: Trainer:innen mit Einwilligung; Kundschaft und ihre Hunde nur mit Einwilligung.
- Formate: 3:2, 4:5, 1:1
- Nicht: Keine Stockwelpen, keine Hunde mit Stachel- oder Kettenhalsband, keine verängstigten Hunde.
- 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.

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

- Anrede: Sie (Trainer:innen-Seiten dürfen du sagen, wenn das Team so spricht)
- Sätze: Kurz, tatkräftig, konkret: wann, wo, für welchen Hund, was mitbringen.
- Haltung: Wie eine Trainerin am Gelände: freundlich, klar, ehrlich über Grenzen.
- Tonproben: Welpengruppe für Hunde bis 16 Wochen. Samstags 10 Uhr, noch zwei Plätze., Wir arbeiten mit Belohnung. Stachelhalsband bleibt im Auto.
- Nicht: „Ihr Liebling“, „Fellnase“, Garantien, Rudelführer-Sprache.

## Hero

Foto-Hero randlos (foto-hero, Variante randlos-unten-links): ein echtes Foto vom Trainingsgelände, Hund und Mensch in Bewegung, Blick auf Augenhöhe des Hundes, in Farbe. Unten links H1 in Anybody breit, ein Satz zur Haltung, „Anmelden“ (Apportiergelb) und Telefon. Direkt darunter die nächsten Kurse mit freien Plätzen. Kein Stockfoto mit Welpe im Körbchen.

- Raster: Foto randlos über 12 Spalten; H1, Satz und Wege unten links über Spalte 1 bis 7 auf ruhiger Bildzone; mobil Foto oben, Text darunter.
- Bild: Echtes Foto vom Gelände, Augenhöhe des Hundes, in Farbe, 3:2 Desktop, 4:5 mobil.
- Überschrift: clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem), Anybody breit; Name der Schule oder ein Satz, kein Label darüber.
- Handlung: „Anmelden“ (Apportiergelb mit dunklem Rand) und Telefon als tel:-Link.
- Zusatz: Direkt unter dem Hero die nächsten drei Kurse mit freien Plätzen; mobil Knopf Anrufen / Anmelden.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=randlos-unten-links) `foto-hero` · Variante „Vollbild, Satz unten links“

## Sektionen in dieser Reihenfolge

1. **Kurse und nächste Termine (Welpen, Junghunde, Alltag, Mantrailing, Agility, Einzeltraining; Filter nach Alter und Thema; freie Plätze und Warteliste nur aus echter Quelle)**: [Wochen-Kursplan mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/wochen-kursplan/demo?v=studio) `wochen-kursplan` · Variante „Yoga- und Fitnessstudio“, [Graustufen zu Farbe / Duoton-Bildbehandlung](https://cecodesign.de/lab/fundus/hover/graustufen-zu-farbe/demo?v=hundeblick) `graustufen-zu-farbe` · Variante „Hundeblick (Blau-Gelb-Duoton, Touch in der Bildschirmmitte)“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
2. **Kurs-Detailseite (je Kurs eine Seite: Alter, Voraussetzungen, Termine, Treffpunkt, Gruppengröße, Preis, Mitbringen, Anmeldung; Vergangenes mit Hinweis statt Fehlerseite)**: [Veranstaltung: Detailseite mit Zuständen](https://cecodesign.de/lab/fundus/sektionen/veranstaltung-detailseite/demo?v=ticket) `veranstaltung-detailseite` · Variante „Ticket“
3. **Haltung und Methoden (belohnungsbasiert, ohne Stachel-, Würge- oder Elektrohalsband; was wir nicht machen und wohin man sonst geht; Erlaubnis nach § 11 TierSchG und Qualifikation)**: [Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)](https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild) `split-screen-sticky-seiten` · Variante „Sticky-Medium mit Clip-Reveal“
4. **Welpengruppe: so läuft es (Alter, Impfungen, Gruppengröße, Spiel und Training im Wechsel; vier Schritte vom Kennenlernen bis zur Gruppe)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo?v=unterstrich) `prozess-timeline-wachsende-linie` · Variante „Unterstrich je Schritt“
5. **Preise und Karten (Kurs, Einzelstunde, Mehrfachkarte, Hausbesuch mit Anfahrt; Endpreise inkl. MwSt.)**: [Preisseite: Endpreise, Rechenweg, Vergleich](https://cecodesign.de/lab/fundus/sektionen/preisseite-geruest/demo?v=kurskarte) `preisseite-geruest` · Variante „Kurskarte“
6. **Tagesstätte und Pension (Probetag, Impfpass, Haftpflicht, Gruppengröße, Ruhezeiten, Bring- und Abholzeiten; freie Plätze im Monat nur aus echter Quelle)**: [Wunschtermin mit freien Terminen und Anfrage-Übergabe](https://cecodesign.de/lab/fundus/sektionen/termin-verfuegbarkeit-anfrage/demo?v=kalender) `termin-verfuegbarkeit-anfrage` · Variante „Monatskalender“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt) `oeffnungszeiten-status` · Variante „Kopfzeile kompakt“
7. **Trainer:innen (Foto im Duoton, Schwerpunkte, Qualifikation, eigener Hund nur, wenn gewünscht)**: [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 Trainer:in eine Seite: Spezialgebiete, Kurse, Ausbildung mit Nachweis, Preis ab, du-Ton erlaubt)**: [Personen-Detailseite](https://cecodesign.de/lab/fundus/sektionen/person-detailseite/demo?v=stylistin) `person-detailseite` · Variante „Stylistin“
9. **Stimmen (über Training, Umgang und Fortschritt, nie über Heilung von Verhaltensproblemen; Google-Bewertungen nur mit Echtheitshinweis)**: [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=wand) `testimonials-neu-gedacht` · Variante „Masonry-Wand“, [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=band) `bewertungsprofil-mit-echtheitshinweis` · Variante „Band unter dem Hero“
10. **Anmeldung (Hund: Name, Alter, Rasse freiwillig → Kurs oder Probetag → Kontakt; Fehlerliste; Bestätigung mit Treffpunkt und Mitbringliste)**: [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=leiste) `mehrschritt-anfrage` · Variante „Schrittleiste“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste) `formular-fehlerzusammenfassung` · Variante „Liste mit Sprunglinks“, [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo?v=termin) `danke-seite-naechste-schritte` · Variante „Fester Termin“
11. **Trainingsgelände und Anfahrt (Treffpunkt, Parken, eingezäunte Fläche, Wasser, Unterstand als Skizze; Adresse als Text)**: [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“
12. **Vertrag widerrufen, kündigen und Barrierefreiheit (bei Online-Kursbuchung und Monatsverträgen der Tagesstätte; Footer und mobiles Menü, ohne Login)**: [Widerrufs- und Kündigungs-Button](https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig) `widerruf-und-kuendigung-schaltflaeche` · Variante „Richtig“, [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Graustufen zu Farbe / Duoton-Bildbehandlung](https://cecodesign.de/lab/fundus/hover/graustufen-zu-farbe/demo?v=hundeblick) `graustufen-zu-farbe` · Variante „Hundeblick (Blau-Gelb-Duoton, Touch in der Bildschirmmitte)“

## Moment (Pflicht: woran man sich erinnert)

- Was: Mit Hundeaugen: die Kurs- und Trainerbilder stehen groß im Blau-Gelb-Duoton und werden beim Zeigen oder in der Bildschirmmitte farbig.
- Wo: Startseite, zweiter Bildschirm
- Gewicht: groß und interaktiv: Bilder mindestens 5 Spalten, Hochformat
- Muster: [Graustufen zu Farbe / Duoton-Bildbehandlung](https://cecodesign.de/lab/fundus/hover/graustufen-zu-farbe/demo?v=hundeblick) `graustufen-zu-farbe` · Variante „Hundeblick (Blau-Gelb-Duoton, Touch in der Bildschirmmitte)“
- 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: [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- Nebenhandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=seitenwechsel) `pfeil-icon-button` · Variante „Seitenwechsel“

## Weitere Bausteine

- Seitenwechsel: [Seitenwechsel in wachsender Markenform](https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-wachsende-form/demo) `seitenwechsel-wachsende-form`
- 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=fab) `mobile-bottom-navigation` · Variante „Daumen-Knopf mit Aktionsmenü (Salon)“
- Hover: [Graustufen zu Farbe / Duoton-Bildbehandlung](https://cecodesign.de/lab/fundus/hover/graustufen-zu-farbe/demo?v=hundeblick) `graustufen-zu-farbe` · Variante „Hundeblick (Blau-Gelb-Duoton, Touch in der Bildschirmmitte)“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
- Mikroanimation: [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`, [Icon-Squash-and-Stretch (Pfeil dehnt sich)](https://cecodesign.de/lab/fundus/mikroanimationen/icon-squash-stretch/demo) `icon-squash-stretch`, [Bewegung als CSS-Funktion](https://cecodesign.de/lab/fundus/animationsstile/bewegung-als-css-funktion/demo?v=federn) `bewegung-als-css-funktion` · Variante „Drei Federn“
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=gastgeber) `studio-visitenkarte-footer` · Variante „Gastgeber (Hotel am See)“

## 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`
- [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo?v=termin) `danke-seite-naechste-schritte` · Variante „Fester Termin“
- [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

- maskottchen-zustaende – Signatur von tierarztpraxis; hier tragen echte Fotos den Hund
- svg-pfad-zeichnen-scroll – Signatur von fahrschule-freundlich-buchbar; keine Leine als Linie quer über die Seite
- konfetti-erfolg – Belohnung als Federn des Häkchens, nicht als Konfetti
- zahlen-odometer – keine hochgezählten Hundezahlen
- cursor-follower-lerp – kein Knochen- oder Pfoten-Cursor
- smooth-scroll-lenis – Termine und Plätze müssen schnell erreichbar sein
- marquee-laufband – Kurse laufen nicht durch
- Pfoten- und Knochen-Ornamente, Comic-Hunde, Stockfotos mit Welpen im Körbchen – eigene Fotos vom Gelände
- Heilversprechen bei Verhaltensproblemen, Garantien wie „in drei Stunden leinenführig“ – unseriös

## Regeln

- Erster Bildschirm: Foto vom Gelände in Farbe, H1, ein Satz zur Haltung, „Anmelden“ und Telefon; direkt darunter die nächsten Kurse mit freien Plätzen. Mobil Knopf Anrufen / Anmelden.
- Signatur (graustufen-zu-farbe): nur Kurs-, Trainer- und Haltungsbilder im Blau-Gelb-Duoton, nie das Hero-Foto und nie Bilder, deren Farbe etwas erklärt (Gelände-Skizze, Impfpass). Eine Zeile erklärt das Duoton einmal. Bei reduzierter Bewegung alle Bilder in Farbe.
- Haltung konkret: Methoden benennen (Belohnung, Markersignal) und Hilfsmittel, die nicht verwendet werden (Stachel-, Würge-, Elektrohalsband, Leinenruck). Kein Versprechen zu Dauer oder Erfolg.
- Erlaubnis nach § 11 TierSchG (Ausbildung von Hunden für Dritte bzw. Halten von Tieren für Dritte in Tagesstätte oder Pension) mit zuständigem Veterinäramt als Aufsichtsbehörde im Impressum (§ 5 DDG). Landesrechtliche Sachkundeprüfungen oder Hundeführerscheine nur nennen, wenn die Schule dafür anerkannt ist. Vom Kunden prüfen lassen.
- Teilnahmebedingungen sichtbar vor der Anmeldung: Impfungen, Haftpflicht der Halter:in, Läufigkeit, kranke Hunde, Rücktritt und Ausfall. Bei Online-Kursbuchung und Monatsverträgen der Tagesstätte Widerruf und Kündigung im Footer ohne Login (widerruf-und-kuendigung-schaltflaeche); ob ein Widerrufsrecht besteht, klärt der Betrieb. Vom Kunden prüfen lassen.
- Verhaltensberatung ist keine Therapie: Verhaltensmedizin und Medikamente gehören zur Tierärztin; bei Verdacht auf Schmerzen oder Krankheit dorthin verweisen.
- Fotos von Hunden der Kundschaft nur mit Einwilligung der Halter:innen, Personen erkennbar nur mit eigener Einwilligung.
- Knöpfe: Apportiergelb mit 2 px Rand in Textfarbe (button-zustaende) für Anmelden; Nebenwege als Konturpille, bei der der Kreis wandert (pfeil-icon-button, Variante seitenwechsel).

## Rezept-Varianten

- **Hundetagesstätte und Hundepension (ohne Training)**: Schrift, Farbe, Stil und Signatur bleiben; das Duoton trägt die Gruppen- und Raumbilder. Statt Kursplan zuerst „Freie Plätze“ (termin-verfuegbarkeit-anfrage, Variante kalender) mit Probetag als erstem Schritt; Pension mit Zeitraum, Anzahl Hunde, Futter und Medikamenten als Freitext ohne Diagnosen. Ein Tag in der Tagesstätte mit Uhrzeiten (prozess-timeline-wachsende-linie, Variante linie). Preise je Tag, Halbtag, Zehnerkarte und Monat; Monatsverträge mit Kündigungs-Button. Erlaubnis nach § 11 TierSchG (Tiere für Dritte halten) und Veterinäramt im Impressum; Gruppengröße und Betreuungsschlüssel nur echt. Vom Kunden prüfen lassen.
- **Hundesalon / Hundefriseur**: Schrift, Farbe, Stil und Signatur bleiben; vorher/nachher nur als Bildpaar mit Einwilligung, nie als Regler (vorher-nachher-vergleichsregler ist Signatur von handwerk). Leistungen und Preise nach Größe und Fellart als speisekarte-editorial (Variante preisliste), Termin über termin-buchung-zwei-klick (Variante vorauswahl: Rasse oder Größe, Leistung). Hinweise zu Dauer, Abholzeit und verfilztem Fell ehrlich. Gewerbe bzw. Erlaubnis nach § 11 TierSchG nur, wenn sie für den Salon gilt. Vom Kunden prüfen lassen.

## Vor der Abgabe

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