# Bauplan: Pflegedienst: Nähe und Klartext

Rezept `pflege-dienst-naehe` · Ambulanter Pflegedienst / Tagespflege / Alltagshilfe und Betreuung · Stimmung: nah, verlässlich, klar, warm · Stand 02.11.2026

Zwei Türen auf einer Seite: Angehörige, die schnell wissen müssen, ob der Dienst zu ihnen kommt und was die Kasse zahlt, und Pflegekräfte, die ihre Bewerbung in einer Minute abschicken wollen. Die größte Schrift und die einfachste Sprache aller Rezepte, echte Gesichter mit Namen und Durchwahl, ein warmes Pflaume statt Klinikblau, Sonnengelb nur für Anrufen, Anfragen und Bewerben. Bewegt wird nur, was jemand selbst öffnet.

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

## Schrift

- Headline: `literata` · Text: `hanken-grotesk`
- Größen: h1 Literata clamp(2.5rem, 1.8rem + 3vw, 4rem), wght 600, opsz automatisch, Laufweite -0.01em, Zeilenhöhe 1.1; h2 clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem), wght 600; h3 1.5rem. Fließtext Hanken Grotesk mindestens 1.25rem (20 px), wght 400, Zeilenhöhe 1.6, max. 60ch, Absatzabstand 1em; Knöpfe 1.25rem wght 600, mindestens 56 px hoch; Telefonnummer im Kopf 1.5rem wght 700 in Tabellenziffern; kleinste Schrift 1rem, auch in Fußzeile und Formularhinweisen. Fett nur für Telefonnummer und Beträge.
- Techniken: [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`, [Optische Größen nutzen (opsz-Achse)](https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo) `optische-groessen-opsz`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [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`

## Farbe

Warmes Weiß als Grund, sehr dunkles Warmgrau statt Schwarz, Pflaume als Hausfarbe für Überschriften, dunkle Sektionen, den Karriere-Bereich und die Fußzeile, Sonnengelb nur für Anrufen, Anfragen und Bewerben. Sekundärtext dunkler als üblich (9 : 1), weil viele Leser älter sind. Gelbe Knöpfe auf hellem Grund mit 2 px Rand in Textfarbe. Kein Klinikblau, kein Mint, keine Verläufe.

- `--farbe-grund` #FAF7F2 (Grund)
- `--farbe-text` #1F1B16 (Text (16 : 1))
- `--farbe-text-2` #5B2A4A (Pflaume: Marke, Überschriften, Karriere-Bereich, Fußzeile (Weiß darauf 11 : 1))
- `--farbe-signal` #FFC845 (Signal Sonnengelb: Anrufen, Anfragen, Bewerben (Text #1F1B16, 11 : 1; auf hellem Grund mit 2 px Rand #1F1B16))
- `--farbe-flaeche` #FFF1CC (Hinweisfläche: Kosten, Erreichbarkeit)
- `--farbe-text-3` #4A443D (Sekundärtext (9 : 1))
- `--farbe-linie` #D8D0C4 (Linien)

## 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) beim Öffnen, cubic-bezier(0.7, 0, 0.84, 0) beim Schließen (token-toggle-asymmetrisch)
- Dauer: 150 (Farbe, Hover), 300 (Akkordeon, Menü, PLZ-Antwort, Dialog öffnen), 200 (schließen); Fokusring ohne Übergang
- Regel: Nichts bewegt sich von selbst: keine Einblendungen beim Scrollen, keine Bild-Reveals, kein Karussell mit Autoplay. Was sich öffnet, öffnet ruhig und schließt schneller. Kein Weg über 8 px, keine Skalierung. Bei prefers-reduced-motion öffnen und schließen alle Teile ohne Übergang.
- Hinweis: Bewusst der UI-Stil als Hauptstil: Auf dieser Seite bewegt sich nur, was der Mensch selbst öffnet (Akkordeon, Menü, PLZ-Antwort, Dialog). Dauern auf UI-Maß gekürzt (Spielart „Nur Tempo“ aus dem Steckbrief): öffnen 300 ms mit Ausklang, schließen 200 ms mit Anlauf. Kein eigener animationsstil_ui nötig.

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 8, 12, 16, 24, 32, 40, 56, 72, 96, 128
- Sektionsabstand: clamp(64px, 8vw, 120px)
- Dichte: luftig
- Hinweis: Großzügig für große Schrift: kein Abstand unter 8 px, Knöpfe mindestens 56 px hoch, Absatzabstand 1em. Hält 200 % Zoom und erhöhte Textabstände.
- Spalten: 12
- Seitenrand: clamp(20px, 5vw, 56px)
- Spaltenabstand: clamp(20px, 3vw, 40px)
- Maximale Breite: 1200px
- Raster: Höchstens zwei Spalten nebeneinander, mobil eine. Text auf 60ch. Navigation mit höchstens fünf Punkten ohne Untermenü.
- Radius klein: 8px
- Radius groß: 12px
- Pillenform für Buttons: False
- Linie: 2px #1F1B16 um gelbe Knöpfe auf hellem Grund; sonst 1px #D8D0C4
- Schatten: keiner
- Form: Wegweiser-Knöpfe zeigen mit der Spitze in ihre Richtung (corner-shape-eckenformen, Variante formen), mit clip-path-Rückfall; Fokusring außen auf eigenem Rahmen.

## Bildsprache

- Licht: Warmes Tageslicht, ruhig.
- Ausschnitt: Pflegekraft im Gespräch, beim Hausbesuch oder am Dienstwagen; Büro und Räume der Tagespflege.
- Personen: Ja: Team mit Namen und Durchwahl; Pflegebedürftige nur mit ausdrücklicher Einwilligung und in würdiger Lage.
- Formate: 3:2, 4:5
- Nicht: Keine Stockfotos von Händen, die Hände halten, keine Rollstuhl-Klischees, kein Klinikblau, kein Video.

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

- Anrede: Sie
- Sätze: Höchstens 15 Wörter je Satz, ein Gedanke pro Satz, Alltagswort zuerst und Fachwort in Klammern.
- Haltung: Nah und verlässlich. Angehörige zuerst; Bewerber:innen bekommen eine eigene Tür.
- Tonproben: Wir helfen beim Waschen und Anziehen (Grundpflege)., Rufen Sie uns an. Frau [Name] berät Sie.
- Nicht: „Pflege mit Herz“, „ganzheitlich“, Abkürzungen wie SGB oder PG ohne Erklärung, hochgezählte Kundenzahlen.

## Hero

Echtes Foto aus dem Team (Pflegekraft im Gespräch, beim Hausbesuch oder am Dienstwagen, mit Einwilligung), daneben ein Satz in einfacher Sprache („Wir pflegen Sie zu Hause – in [Ort], [Ort] und Umgebung.“), die Telefonnummer groß als tel:-Link mit Erreichbarkeit und zwei Wegweiser-Knöpfe „Pflege anfragen“ und „Arbeiten bei uns“. Direkt darunter das Feld „Kommen wir zu Ihnen?“ mit Postleitzahl. Kein Video, keine Stockfotos von Händen.

- Raster: 12 Spalten: Text über Spalte 1 bis 6, Foto über 7 bis 12; mobil Text zuerst, Foto darunter.
- Bild: Echtes Teamfoto, 3:2 oder 4:5.
- Überschrift: clamp(2.5rem, 1.8rem + 3vw, 4rem), Literata 600, oben links.
- Handlung: Zwei Wegweiser „Pflege anfragen“ (Sonnengelb mit 2px Rand) und „Arbeiten bei uns“ (Pflaume), mindestens 56 px hoch, untereinander auf dem Telefon.
- Zusatz: Telefonnummer 1.5rem 700 als tel:-Link mit Erreichbarkeit; darunter das Feld „Kommen wir zu Ihnen?“ mit Postleitzahl.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=split-randabfallend) `foto-hero` · Variante „Split, Foto bis an den Rand“

## Sektionen in dieser Reihenfolge

1. **Kommen wir zu Ihnen? (Postleitzahl zuerst: Ja, Nein mit Hinweis auf den Pflegestützpunkt, oder „Bitte anrufen“; die Orte zusätzlich als Text; danach Anfrage in kurzen Schritten: wer braucht Hilfe, wobei, ab wann, beste Zeit für den Rückruf)**: [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=plz) `mehrschritt-anfrage` · Variante „PLZ zuerst“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt) `formular-fehlerzusammenfassung` · Variante „Kompakt über dem Knopf“, [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
2. **Wobei wir helfen – nach Lebenslage („Nach dem Krankenhaus“, „Wenn der Alltag schwer wird“, „Wenn Angehörige Pause brauchen“; Fachwort in Klammern; jede Lage mit eigener Unterseite, Antwort zuerst)**: [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“
3. **Was kostet das, was zahlt die Kasse? (Leistungen nach Pflegegrad als Tabelle mit Stand-Datum und Quelle, zwei bis drei Rechenbeispiele in Euro, Hilfe beim Antrag)**: [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“
4. **So beginnt die Pflege (Anruf oder Rückruf → Besuch zu Hause → Kostenvoranschlag → feste Bezugspersonen)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo) `prozess-timeline-wachsende-linie`
5. **Ihre Ansprechpersonen (Pflegedienstleitung und Büro mit Foto, Name, Aufgabe, Durchwahl, Sprachen; bis etwa fünf Personen Variante statement, darüber raster)**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement) `team-ueber-mich-layout` · Variante „Statement-Satz mit Inline-Bildern“
6. **Tagespflege (nur bei eigenem Haus: Tagesablauf, Fahrdienst, Probetag, Räume, Zeiten)**: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne) `css-native-karussell` · Variante „Vollbild-Bühne“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin) `oeffnungszeiten-status` · Variante „Termin nach Vereinbarung“
7. **Stimmen und Bewertungen (Google-Profil mit Stand-Datum und Echtheitshinweis; Stimmen von Angehörigen nur mit Freigabe)**: [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille) `bewertungsprofil-mit-echtheitshinweis` · Variante „Kopfzeilen-Pille“
8. **Arbeiten bei uns – zweite Startseite (Stellen offen mit Stunden, Touren, Gehalt oder Tarif, Dienstwagen; Bewerbung in einer Minute mit fünf Fragen, ohne Anschreiben; Kennenlernen oder Probetag; ab vier Stellen mit Filter)**: [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=liste) `stellen-karriere` · Variante „Viele Stellen mit Filter“, [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=ring) `mehrschritt-anfrage` · Variante „Fortschrittsring“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt) `formular-fehlerzusammenfassung` · Variante „Kompakt über dem Knopf“
9. **Kontakt und Anfahrt (Rückruf-Formular mit drei Feldern, Telefon mit Erreichbarkeit und Notfallnummern, Büro-Adresse als Text, Karte per 2-Klick; ab zwei Standorten als Liste)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [Ö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=bild) `karte-zwei-klick` · Variante „Kartenbild mit 2-Klick“, [Standortfinder als Liste](https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt) `standortfinder-liste` · Variante „Nur Liste“, [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=werkstatt) `firmendaten-strukturiert` · Variante „Kfz-Werkstatt (AutoRepair)“
10. **Zwei Wegweiser zum Schluss („Pflege anfragen“ / „Arbeiten bei uns“) mit Telefonnummer – dieselben Wegweiser wie im Hero**: [Eckenformen mit corner-shape (Squircle, Scoop, Notch, Bevel)](https://cecodesign.de/lab/fundus/mikroanimationen/corner-shape-eckenformen/demo?v=formen) `corner-shape-eckenformen` · Variante „Freie Formen mit border-shape“
11. **Barrierefreiheit (eigene Seite nach EU-Muster als freiwilliger Aufbau; die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände; Kontrastmodus geprüft)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung) `barrierefreiheit-seite` · Variante „Erklärung (EU-Muster)“, [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`

## Signatur (Pflicht)

- [Eckenformen mit corner-shape (Squircle, Scoop, Notch, Bevel)](https://cecodesign.de/lab/fundus/mikroanimationen/corner-shape-eckenformen/demo?v=formen) `corner-shape-eckenformen` · Variante „Freie Formen mit border-shape“

## 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=linie) `pfeil-icon-button` · Variante „Linie (Stripe)“

## Weitere Bausteine

- Navigation: [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)“
- Mikroanimation: [Eckenformen mit corner-shape (Squircle, Scoop, Notch, Bevel)](https://cecodesign.de/lab/fundus/mikroanimationen/corner-shape-eckenformen/demo?v=formen) `corner-shape-eckenformen` · Variante „Freie Formen mit border-shape“, [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`, [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`, [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`
- Galerie: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne) `css-native-karussell` · Variante „Vollbild-Bühne“
- 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=werkstatt) `firmendaten-strukturiert` · Variante „Kfz-Werkstatt (AutoRepair)“
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`

## Nicht verwenden

- cinematic-video-hero / interaktives-3d-hero – lange Ladezeit; die Kernbotschaft ist ein Satz und eine Telefonnummer
- hide-on-scroll-header – Telefonnummer und „Pflege anfragen“ müssen immer sichtbar bleiben
- marquee-laufband / rotating-words / typewriter-natural – bewegter Text ist für ältere Leser und Screenreader eine Hürde
- zahlen-odometer – hochgezählte „1.000 zufriedene Kunden“ wirken unseriös; Zahlen stehen still oder gar nicht
- hovercard-interest-invoker – Signatur von praxis; Fachbegriffe hier immer direkt im Text erklären
- stapelkarten / bento-grid-interaktiv / flick-karten-stapel – verstecken Inhalte oder verlangen Gesten
- frosted-glass-erweitert / progressive-blur – senken den Kontrast unter Kopf und Leisten
- smooth-scroll-lenis / cursor-follower-lerp / magnetische-elemente – stören Menschen mit Zittern, Sehschwäche oder Bildschirmlupe
- konfetti-erfolg – nach der Anfrage eine ruhige Bestätigung mit Namen und Rückrufzeit
- prompt-hero-eingabefeld / ki-streaming-text-denkindikator – kein KI-Chat statt Telefon
- kostenrechner-konfigurator – Kassenleistungen sind gesetzlich und ändern sich, Eigenanteile hängen vom Einzelfall ab (wann_nicht); Tabelle mit Stand-Datum und Rechenbeispiele statt Rechner
- Stockfotos von alten Händen, Rollatoren und Models in Kitteln – echte Menschen aus dem Dienst, mit Einwilligung
- „Leichte Sprache“ als Behauptung – nur mit geprüftem Text nach den Regeln der Leichten Sprache; hier gilt einfache Sprache

## Regeln

- Erster Bildschirm: echtes Foto, ein Satz mit Leistung und Orten, Telefonnummer groß mit Erreichbarkeit, zwei Wegweiser „Pflege anfragen“ und „Arbeiten bei uns“, darunter „Kommen wir zu Ihnen?“ mit Postleitzahl.
- Größte Schrift aller Rezepte: Fließtext mindestens 1.25rem (20 px), Zeilenhöhe 1.6, höchstens 60ch; Knöpfe 1.25rem und mindestens 56 px hoch; keine Schrift unter 1rem.
- Einfache Sprache: Sätze mit höchstens 15 Wörtern, Sie-Form, ein Gedanke pro Satz; Alltagswort zuerst, Fachwort in Klammern („Hilfe beim Waschen (Grundpflege)“); keine Abkürzungen wie SGB oder PG ohne Erklärung.
- Zwei Zielgruppen, zwei Wege: Angehörige und Pflegebedürftige zuerst; „Arbeiten bei uns“ als zweite Startseite mit eigenem Punkt in der Navigation und als Wegweiser im Hero, nie zwischen Leistungen versteckt. Navigation mit höchstens fünf Punkten, ohne Untermenüs.
- Einzugsgebiet zuerst klären: Postleitzahl mit drei Antworten (Ja; Nein, mit Hinweis auf den Pflegestützpunkt; „Bitte anrufen“), die Orte zusätzlich als Liste im Text (Home Instead führt die Postleitzahlen offen).
- Kosten offen: was die Pflegekasse je Pflegegrad zahlt, als Tabelle in Tabellenziffern mit „Stand: Monat Jahr“ und Quelle, dazu zwei bis drei Rechenbeispiele in Euro (wie Home Instead UK mit Wochenbeispielen, Careship mit Budgets je Pflegegrad). Beträge kommen vom Kunden und werden bei jeder Reform geprüft.
- Menschen statt Marke: Pflegedienstleitung und Büro mit Foto, Name, Aufgabe und Durchwahl. Feste Bezugspersonen und feste Touren nur versprechen, wenn der Dienst so arbeitet (wie BESSER UMSORGT).
- Bewerbung in einer Minute: höchstens fünf kurze Fragen (Beruf, Stunden, Führerschein, Ort, Telefon), kein Anschreiben, kein Lebenslauf, Unterlagen später; danach Rückruf und Kennenlernen oder Probetag. Jede Stelle nennt Stunden, Gehalt oder Tarif, Dienstwagen und Tourenzeiten; Stellen mit (m/w/d).
- Gesundheitsdaten nicht abfragen: Anfrage ohne Diagnose, Pflegegrad nur als freiwillige Auswahl; Datenschutzhinweis direkt am Formular; Bewerberdaten getrennt behandeln (vom Kunden prüfen lassen).
- Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Träger und Vertretungsberechtigten, weitere Pflichtangaben (z. B. zur Zulassung durch die Pflegekassen) vom Kunden prüfen lassen; im Footer „Bei Lebensgefahr: 112“ und die Nummer für Notfälle außerhalb der Bürozeiten, falls es sie gibt. Claude schreibt keine Rechtstexte.
- Fotos von Pflegebedürftigen nur mit ausdrücklicher Einwilligung und in würdiger Lage; lieber Team, Dienstwagen, Büro und Tagespflege-Räume.
- Bewegung nur, wo etwas auf- oder zugeht (Akkordeon, Menü, PLZ-Antwort, Dialog): öffnen 300 ms, schließen 200 ms. Keine Einblendungen beim Scrollen, nichts bewegt sich von selbst.
- Wegweiser-Knöpfe (corner-shape-eckenformen, Variante formen) zeigen mit der Spitze in die Richtung ihres Wegs; wo border-shape fehlt, greift der clip-path-Rückfall. Der Fokusring liegt außen auf einem eigenen Rahmen, damit der Zuschnitt ihn nicht abschneidet; die Beschriftung trägt die Aussage, nicht die Form.
- Gelbe Knöpfe auf hellem Grund mit 2 px Rand in Textfarbe (Nicht-Text-Kontrast 3 : 1), auf Pflaume ohne Rand. Die untere Mobilleiste (mobile-bottom-navigation) zeigt Anrufen, Rückruf, Anfahrt und verdeckt das Consent-Banner nicht.
- Die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände ohne Abschneiden (zoom-und-textabstand-robust); Kontrastmodus prüfen (kontrastmodus-forced-colors).

## Rezept-Varianten

- **Tagespflege**: Startseite mit Tagesablauf, Fahrdienst und Probetag. Kosten getrennt nach Pflegekasse und Eigenanteil (Verpflegung, Investitionskosten); Beträge kommen vom Kunden, mit Stand-Datum.
- **Alltagshilfe und Betreuung (ohne Pflege)**: Kostenteil auf Entlastungsbetrag und private Zahlung zuschneiden (wie Careship: Stundenpreis offen, Abrechnung mit der Kasse erklärt); was nicht dazugehört (Wundversorgung, Spritzen), ausdrücklich nennen. Bewerbung auch für Quereinsteiger mit Qualifizierung (wie Home Instead).

## Vor der Abgabe

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