# Bauplan: Bestattung: würdig und klar

Rezept `bestattung-wuerdig` · Bestattungsinstitut / Bestattungshaus / Trauerbegleitung (auch Trauerrede, Baum- und Waldbestattung) · Stimmung: ruhig, würdig, klar, warm · Stand 02.11.2026

Zwei Türen für zwei sehr verschiedene Lagen: Wer gerade einen Menschen verloren hat, findet ohne Suchen die Nummer, unter der Tag und Nacht jemand abnimmt, und eine Anleitung nach Sterbeort, Schritt für Schritt. Wer vorsorgt, findet Bestattungsarten, offene Kosten mit getrennten Fremdleistungen und eine Vorsorge, deren Geld bei einer Treuhand liegt. Eine Text-Antiqua mit ruhiger Grotesk, Kalk, Sandstein und Schiefer, Moosgrün nur für Anrufen und Anfragen. Kein Kreuz, keine Taube, keine flackernde Kerze. Bilder der Räume blenden langsam über, sonst bewegt sich nur, was jemand öffnet. Signatur: Riffelglas vor den Abschiedsräumen, das erst klar wird, wenn man hineinsehen möchte. Unterschied zu pflege-dienst-naehe (Literata, Pflaume, Sonnengelb, Wegweiser-Ecken) und praxis-gesundheit-ruhig (Hedvig, Petrol, Hovercards): andere Schriften, erdige statt Marken-Farben, weicher Bildstil statt reinem UI-Stil, Diskretion als Material.

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

## Schrift

- Headline: `source-serif-4` · Text: `commissioner`
- Größen: h1 Source Serif 4 clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem), wght 400, opsz automatisch, Laufweite -0.01em, Zeilenhöhe 1.12; h2 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem), wght 400; h3 1.375rem, wght 600. Namen auf Gedenkseiten in Source Serif 4 Italic. Fließtext Commissioner mindestens 1.1875rem (19 px), wght 400, FLAR 0, VOLM 0, Zeilenhöhe 1.65, höchstens 62ch; Navigation und Labels Commissioner 1rem, wght 500; Rubriken in Versal nur kurz und mit +0.06em; Telefonnummer 1.5rem, wght 600, Tabellenziffern; Preise, Daten und Lebensdaten in Tabellenziffern. Nichts fetter als 600.
- 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

Kalkweiß als Grund, Sandstein für Flächen wie Kosten, Vorsorge und Hinweise, Schiefer (warmes Fast-Schwarz) für die Sofortleiste, dunkle Bänder und den Footer. Moosgrün ist der einzige Signalton: Anrufen, Rückruf, Vorsorge anfragen. Es steht für Ruhe, nicht für Alarm. Auf Schiefer wird der Knopf zu hellem Moos mit Schiefer-Schrift. Kein Schwarzrand, kein Lila oder Violett, kein Gold, keine Verläufe, keine Farbe aus Symbolen. Sekundärtext dunkler als üblich (6,5 : 1), weil viele Leser älter sind oder unter Stress lesen.

- `--farbe-grund` #F4F1EB (Grund Kalk)
- `--farbe-text` #24221F (Text (14 : 1))
- `--farbe-flaeche` #E8E1D5 (Fläche Sandstein: Kosten, Vorsorge, Hinweise (Text 12 : 1))
- `--farbe-schiefer` #2B2D2C (Schiefer: Sofortleiste, dunkle Bänder, Footer (Kalk darauf 12 : 1))
- `--farbe-signal` #3F5B48 (Signal Moosgrün: Anrufen, Rückruf, Vorsorge anfragen (Weiß darauf 7,5 : 1; als Fläche auf Kalk 6,6 : 1))
- `--farbe-helles` #8FB59A (helles Moos: derselbe Knopf auf Schiefer (Schiefer-Schrift darauf 6,1 : 1))
- `--farbe-text-2` #5A554D (Sekundärtext, Lebensdaten, Meta (6,5 : 1 auf Kalk, 5,7 : 1 auf Sandstein))
- `--farbe-linie` #D3CCC0 (Linien)

## Bewegung

- Animationsstil: [Animationsstil „Luxus weich“](https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/demo) `token-luxus-weich`
- 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.37, 0, 0.63, 1) (token-luxus-weich, nur Raumbilder und Riffelglas); UI über animationsstil_ui
- Dauer: 150 (Farbe, Hover), 300 (Menü, Reiter, Akkordeon, Dialog öffnen), 200 (schließen), 1400 (Überblendung der Raumbilder, Riffelglas wird klar), 500 (dasselbe bei reduzierter Bewegung, nur Deckkraft)
- Regel: Nichts bewegt sich von selbst: keine Einblendungen beim Scrollen, keine Bild-Reveals, keine Diashow mit Autoplay, keine flackernde Kerze. Bilder wechseln nur auf Klick und blenden dann langsam über. Kein Weg über 8 px, keine Skalierung, kein Überschwingen. Bei prefers-reduced-motion öffnen alle Teile ohne Übergang, Raumbilder wechseln mit 500 ms Deckkraft, das Riffelglas wird ohne Übergang klar.
- Hinweis: Der weiche Stil gilt nur für zwei Dinge: den Wechsel der Raumbilder (Überblendung 1,4 s mit sine.inOut, ohne Blur und ohne Zurückskalieren) und das Klarwerden des Riffelglases. Alles andere steht. Menü, Reiter, Akkordeons, Kondolenz-Dialog und Rückruf-Formular laufen über token-toggle-asymmetrisch auf UI-Maß: öffnen 300 ms, schließen 200 ms. token-luxus-weich schließt Formulare aus (wann_nicht), deshalb der UI-Stil.

## 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, 72, 104, 152
- Sektionsabstand: clamp(80px, 10vw, 152px)
- Dichte: luftig
- Hinweis: Viel Ruhe um wenige Elemente: Schritte nach Sterbeort mit 24 px Abstand, Knöpfe mindestens 48 px hoch, nichts gedrängt.
- Spalten: 12
- Seitenrand: clamp(20px, 5vw, 64px)
- Spaltenabstand: clamp(20px, 3vw, 40px)
- Maximale Breite: 1200px
- Raster: Hero 5/7 (Text/Foto), Abschiedsräume 4/8 (Demo geriffeltes-glas). Zwei Türen gleich breit nebeneinander, mobil untereinander. Text auf 62ch.
- Radius klein: 2px
- Radius groß: 4px
- Pillenform für Buttons: False
- Linie: 1px #D3CCC0
- Schatten: keiner
- Form: Fast eckig und still. Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie) oder Moosgrün gefüllt; keine Pille.

## Bildsprache

- Licht: Ruhiges Tageslicht, weich, ohne Gegenlicht-Pathos.
- Ausschnitt: Abschiedsraum, Fenster, Garten, Material wie Holz, Leinen, Stein.
- Personen: Nur das Team mit Einwilligung; keine Trauernden, keine Verstorbenen.
- Formate: 4:5, 3:2
- Nicht: Kein Kreuz, keine Taube, keine Kerze, keine Stockfotos von Händen, keine Sonnenuntergänge als Symbol, kein Video.

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

- Anrede: Sie
- Sätze: Kurze Sätze, ein Gedanke pro Satz; Fachwort in Klammern hinter dem Alltagswort.
- Haltung: Würdig, warm, klar. Keine Verkaufssprache.
- Tonproben: Ein Mensch ist gestorben. Wir sind jetzt für Sie da., Was zu tun ist, wenn jemand zu Hause stirbt.
- Nicht: „unvergesslicher Abschied“, Floskel-Ketten, Verkaufssprache, „2.000 Bestattungen im Jahr“ als Botschaft.

## Hero

Ruhiges, echtes Foto ohne Menschen in Trauer: Abschiedsraum im Tageslicht, Garten, Fenster oder Material (Holz, Leinen, Stein). Daneben ein Satz in einfacher Sprache (Platzhalter: „Wir sind da, wenn ein Mensch stirbt. Und wenn Sie vorsorgen möchten.“), die Nummer groß als tel:-Link mit „Tag und Nacht erreichbar“ und zwei gleich gebaute Türen: „Ein Mensch ist gestorben“ (führt zu Was ist jetzt zu tun?) und „Ich möchte vorsorgen“. Die Sofortleiste steht schon über dem Hero. Kein Video, kein Kreuz, keine Taube, keine Kerze, keine Stockfotos von Händen.

- Raster: 12 Spalten: Text über Spalte 1 bis 5, Foto über 6 bis 12; die Sofortleiste steht schon über dem Hero über die volle Breite.
- Bild: Ruhiges, echtes Foto ohne Menschen in Trauer, 4:5 oder 3:2.
- Überschrift: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem), Source Serif 4 400, links.
- Handlung: Zwei gleich gebaute Türen „Ein Mensch ist gestorben“ und „Ich möchte vorsorgen“; die Nummer groß als tel:-Link (Moosgrün).
- Zusatz: „Tag und Nacht erreichbar“ nur, wenn nachts ein Mensch abnimmt; Sofortleiste auf Schiefer.

- 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. **Im Trauerfall: Was ist jetzt zu tun? (Sofortleiste mit der Nummer auf jeder Seite; darunter die Anleitung nach Sterbeort als Reiter: zu Hause, im Krankenhaus / Heim / Hospiz, unerwartet oder im Ausland; je Reiter drei bis fünf Schritte, der Satz „Sie haben Zeit“, Unterlagen als Checkliste zum Drucken, Rückruf mit zwei Feldern)**: [Trauerfall-Sofortleiste mit erster Anleitung](https://cecodesign.de/lab/fundus/sektionen/trauerfall-sofortleiste/demo?v=seite) `trauerfall-sofortleiste` · Variante „Eigene Seite „Was ist jetzt zu tun?““, [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“, [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis) `akkordeon-hoehe-auto` · Variante „FAQ Fahrschule, natives details“
2. **So begleiten wir Sie (Erstgespräch zu Hause oder bei uns → Abschied nehmen → Trauerfeier → Beisetzung → danach: Formalitäten, Trauergruppe, Grabpflege); die Linie steht fest und füllt sich nicht beim Scrollen**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo) `prozess-timeline-wachsende-linie`
3. **Bestattungsarten (Erd-, Feuer-, See-, Baum- und Waldbestattung, Feiern verschiedener Religionen und weltliche Feier; je Art eine Unterseite, Antwort zuerst: was es ist, wo es möglich ist, was es ungefähr kostet)**: [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. **Was kostet eine Bestattung? (drei echte Tabellen in Tabellenziffern: eigene Leistungen als Gesamtpreise inkl. MwSt.; Fremdleistungen wie Friedhof, Krematorium, Standesamt und Anzeige als Spanne mit Quelle und Stand; Überführung mit Berechnungsgrundlage je Zone oder Kilometer; zwei Rechenbeispiele und „Angebot anfordern“)**: [Preis-Sektion mit Haltung](https://cecodesign.de/lab/fundus/hero-layouts/preis-section-editorial/demo) `preis-section-editorial`
5. **Vorsorge (was man festlegen kann, wie das Geld sicher liegt: Treuhand oder Sterbegeldversicherung; Fragen zu Pflegeheim und Schonvermögen; Gespräch zu Hause oder bei uns vereinbaren, kurzes Formular ohne Gesundheitsdaten)**: [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“, [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`
6. **Traueranzeigen und Gedenkseiten (Liste mit Name, Lebensdaten und Termin der Trauerfeier, Suche nach Namen; Gedenkseite mit Anzeige, Trauerfeier als .ics, Kondolenzbuch mit Freischaltung, stille Kerze als Zahl, „Spenden statt Blumen“ mit Empfänger; Link zur Seite kopieren; nur mit Zustimmung der Angehörigen)**: [Traueranzeigen und Gedenkseite mit Kondolenzbuch](https://cecodesign.de/lab/fundus/sektionen/gedenkseiten-kondolenz/demo) `gedenkseiten-kondolenz`, [Kopieren-Feedback](https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/demo) `kopieren-feedback`
7. **Abschied nehmen: unsere Räume (Abschiedsraum, Feierhalle, Garten, Beratungszimmer; ein Raum zur Zeit, Reiter nennen den Raum; vor dem Foto liegt Riffelglas, das erst auf „Raum ansehen“ klar wird; Größe, Plätze und Zugang ohne Stufen als Text)**: [Geriffeltes Glas (Fluted Glass)](https://cecodesign.de/lab/fundus/glas-material/geriffeltes-glas/demo?v=still) `geriffeltes-glas` · Variante „Stehendes Riffelglas, klar auf Knopfdruck (SVG, ohne three.js)“, [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“
8. **Wer Sie begleitet (Inhaberin oder Inhaber, Bestatterinnen und Bestatter, Trauerbegleitung mit Foto, Name, Aufgabe und Durchwahl; bis etwa fünf Personen als Satz mit kleinen Porträts, darüber als 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“
9. **Kontakt und Anfahrt (Telefon Tag und Nacht, Bürozeiten mit Status, Adresse als Text, Parken und Zugang ohne Stufen, Karte per 2-Klick; ab zwei Häusern als Liste)**: [Ö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. **Barrierefreiheit (eigene Seite als freiwilliger Aufbau; die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände)**: [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`

## Signatur (Pflicht)

- [Geriffeltes Glas (Fluted Glass)](https://cecodesign.de/lab/fundus/glas-material/geriffeltes-glas/demo?v=still) `geriffeltes-glas` · Variante „Stehendes Riffelglas, klar auf Knopfdruck (SVG, ohne three.js)“

## 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: [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`
- Mikroanimation: [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`, [Kopieren-Feedback](https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/demo) `kopieren-feedback`
- Material: [Geriffeltes Glas (Fluted Glass)](https://cecodesign.de/lab/fundus/glas-material/geriffeltes-glas/demo?v=still) `geriffeltes-glas` · Variante „Stehendes Riffelglas, klar auf Knopfdruck (SVG, ohne three.js)“
- 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; wer anruft, braucht die Nummer, kein Bild in Bewegung
- hide-on-scroll-header – die Sofortleiste mit der Nummer muss immer sichtbar bleiben
- clip-path-bild-reveal / split-mask-reveal / blur-reveal / scroll-word-highlight – inszenierte Auftritte wirken im Trauerfall wie Effekthascherei; Text und Bilder stehen
- marquee-laufband / rotating-words / typewriter-natural – bewegter Text ist für Menschen unter Stress eine Hürde
- zahlen-odometer / zahlen-fakten-section – „2.000 Bestattungen im Jahr“ ist keine Botschaft für Trauernde
- konfetti-erfolg / like-herz-burst / druck-feedback – Feiern und Überschwingen sind pietätlos; nach dem Absenden eine ruhige Bestätigung mit Rückrufzeit
- smooth-scroll-lenis / cursor-follower-lerp / magnetische-elemente / kontextueller-cursor – Agentur-Gesten, stören Menschen mit Bildschirmlupe oder zitternder Hand
- prompt-hero-eingabefeld / ki-streaming-text-denkindikator – kein Chatbot statt eines Menschen am Telefon
- kostenrechner-konfigurator – im Trauerfall keine Regler; Kosten als Tabelle, Rechenbeispiele und persönliches Angebot
- stapelkarten / flick-karten-stapel / bento-grid-interaktiv – verstecken Inhalte oder verlangen Gesten
- atmosphaere-partikel / fluessig-marmor-hintergrund – Glut, Staub und fließende Flächen werden hier sofort zum Kitsch
- Kreuz, Taube, Engel, betende Hände, Lilien und Kerzen als Deko-Bilder – Klischee; Glaube und Symbole wählt die Familie für ihre eigene Feier
- Schwarzrand, Lila oder Violett als Trauerfarbe, Goldschrift – Klischee der Trauerdrucksache
- Flackernde oder animierte Kerzen auf Gedenkseiten – die Kerze ist ein stilles Zeichen mit Zahl

## Regeln

- Erster Bildschirm: ruhiges Foto, ein Satz, die Nummer groß mit Erreichbarkeit und zwei gleich gebaute Türen „Ein Mensch ist gestorben“ und „Ich möchte vorsorgen“. Die Sofortleiste (trauerfall-sofortleiste) steht auf jeder Seite, am Desktop oben, mobil unten, und verdeckt weder Consent-Banner noch Fokus.
- „Tag und Nacht erreichbar“ nur, wenn nachts wirklich ein Mensch abnimmt (Trostwerk und Bestattung Wien nennen ihre 24-h-Nummer im Kopf); sonst die echten Zeiten der Rufbereitschaft nennen.
- Was ist jetzt zu tun? nach Sterbeort, je drei bis fünf Schritte, mit dem Satz „Sie haben Zeit.“ Zu Hause zuerst Hausärztin, Hausarzt oder der ärztliche Bereitschaftsdienst 116 117 für die Todesbescheinigung; in Krankenhaus, Heim und Hospiz übernimmt das Haus. Unterlagen als Checkliste zum Drucken. Der Sterbefall ist spätestens am dritten Werktag nach dem Tod beim Standesamt anzuzeigen (§ 28 PStG), das übernimmt meist das Bestattungshaus. Texte vom Kunden prüfen lassen.
- Bestattungsrecht ist Landesrecht: Frist bis zur Bestattung, wie lange Verstorbene zu Hause bleiben dürfen, Sargpflicht, Friedhofszwang und Ausnahmen für die Urne regelt das Bestattungsgesetz des Landes. Diese Angaben nur nach dem Gesetz des eigenen Landes formulieren und vom Kunden prüfen lassen; nichts aus anderen Ländern oder aus Österreich übernehmen.
- Kosten offen (Preisangabenverordnung): eigene Leistungen als Gesamtpreise inkl. MwSt.; Fremdleistungen (Friedhof, Krematorium, Standesamt, Anzeige) getrennt, als Spanne mit Quelle und Stand; Überführung mit Berechnungsgrundlage und Höhe, weil sie bei jeder Bestattung anfällt (BGH, Urteil vom 14.01.2016, I ZR 61/14). Kein Lockpreis „ab …“ ohne Liste, was enthalten ist. Beträge kommen vom Kunden und werden vom Kunden geprüft.
- Vorsorge: Vorsorgegeld liegt nie auf dem Geschäftskonto des Hauses, sondern bei einer Treuhand oder in einer Sterbegeldversicherung; die Seite sagt, wo und wie. Wer Versicherungen vermittelt, braucht unter Umständen eine Erlaubnis nach § 34d GewO und nennt sie im Impressum. Aussagen zum Schonvermögen (Sozialhilfe, Pflegeheim) nur allgemein und mit „im Einzelfall“, nie als Zusage. Formular ohne Gesundheitsdaten. Alles vom Kunden prüfen lassen.
- Gedenkseiten nur mit Zustimmung der Angehörigen, die die Bestattung beauftragt haben. Kondolenzen werden vor der Freischaltung gelesen, E-Mail-Adressen bleiben intern. Jede Gedenkseite sagt, wie lange sie online bleibt und wie die Familie sie löschen lässt; auf Wunsch nicht in Suchmaschinen (noindex). Fotos nur mit Nutzungsrecht, Datenschutzhinweis direkt am Kondolenz-Formular (vom Kunden prüfen lassen).
- Sprache: Sie-Form, kurze Sätze, ein Gedanke pro Satz; „Verstorbene“, „Angehörige“, „Abschied“. Keine Verkaufssprache, keine Floskel-Ketten. Fachwort in Klammern hinter dem Alltagswort („ärztliche Feststellung des Todes (Leichenschau)“).
- Weltanschauung offen: keine religiösen Symbole als Gestaltungsmittel. Feiern verschiedener Religionen und die weltliche Feier stehen als Text unter den Bestattungsarten, nur mit Angeboten, die das Haus wirklich hat.
- Bilder: Räume, Licht, Garten, Material und das Team (mit Einwilligung). Keine Verstorbenen, keine weinenden Menschen als Stimmung, keine Stockfotos von Händen, Kreuzen und Kerzen.
- Riffelglas (geriffeltes-glas) nur vor Raumfotos ohne Menschen, nie vor Text, Karten oder Gesichtern. Stehend, ohne Drift und ohne Kopplung an Zeiger oder Scroll; als SVG- oder CSS-Fassung ohne WebGL, wo das reicht. „Raum ansehen“ ist ein echter Knopf mit aria-pressed, das Glas wird in 1,4 s klar und auf Wunsch wieder trüb; der alt-Text beschreibt den Raum in beiden Zuständen.
- Bewegung: nur der Wechsel der Raumbilder und das Riffelglas laufen 1,4 s weich; Menü, Reiter, Akkordeons und Dialoge öffnen in 300 ms und schließen in 200 ms. Nichts bewegt sich von selbst, keine Einblendungen beim Scrollen.
- Größe und Kontrast: Fließtext mindestens 19 px, Zeilenhöhe 1.65, höchstens 62ch; Knöpfe mindestens 48 px hoch; Sekundärtext mindestens 6 : 1. Die Seite hält 200 % Zoom, 320 px Breite und erhöhte Textabstände (zoom-und-textabstand-robust).
- Keine Werbe-Tracker: kein Remarketing auf Trauerfall- und Gedenkseiten; Statistik nur mit Einwilligung über das gestaltete Consent-Banner.
- Empfehlungen und Partner (Steinmetz, Floristik, Trauerrede, Grabpflege): Erhält das Haus eine Provision, steht das sichtbar an der Empfehlung (§ 5a UWG; BGH, Urteil vom 27.04.2017, I ZR 55/16, zu Bestattungsportalen). Vom Kunden prüfen lassen.
- Pflichtangaben (Leitfaden 8a): Impressum (§ 5 DDG) mit Inhaberin oder Geschäftsführung, Register und, falls zutreffend, Kammer- oder Erlaubnisangaben; Verbandszeichen und Siegel nur mit Nachweis; Datenschutzerklärung; Erklärung zur Barrierefreiheit. Claude schreibt keine Rechtstexte, alles vom Kunden prüfen lassen.

## Rezept-Varianten

- **Trauerrednerin / Trauerredner (freie Rede, ohne Bestattungshaus)**: Hauptziel ist das Erstgespräch. Statt der 24-h-Sofortleiste eine Leiste mit Erreichbarkeit und Rückruf. Honorar offen als Pauschale mit Anfahrt, Beispieltexte nur mit Freigabe der Familie. Gibt es keine eigenen Räume, liegt das Riffelglas vor dem Foto eines Feierorts ohne Menschen (Kapelle, Waldplatz, Saal). Schrift, Farbe, Stil und Signatur bleiben.
- **Baum- und Waldbestattung (Bestattungswald, Ruhewald)**: Hauptziel ist die Waldführung und die Wahl des Platzes. Grabarten mit ab-Preis und was darin steckt, getrennt davon Beisetzung und Bestattungshaus (wie FriedWald). Führungstermine als Liste, erst ab etwa acht Terminen im Monat als Kalender (programm-kalender, Variante programm). Ruhezeit, Grabschmuck und Wege nach der Satzung des Waldes vom Kunden prüfen lassen. Das Riffelglas liegt vor einem Waldfoto ohne Menschen.

## Vor der Abgabe

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