Zum Inhalt
← Rezepte
Alle Rezepte

Bestattung: würdig und klar

Bestattungsinstitut / Bestattungshaus / Trauerbegleitung (auch Trauerrede, Baum- und Waldbestattung)

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.

Bauplan tokens.css Alle Techniken

Schrift

Würdig und klar

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 …

Headline
Source Serif 4
Text
Commissioner

Farbe

  • #F4F1EB
  • #24221F
  • #E8E1D5
  • #2B2D2C
  • #3F5B48
  • #8FB59A
  • #5A554D
  • #D3CCC0

Bewegung

cubic-bezier(0.37, 0, 0.63, 1)
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)

Aufbau der Seite

SignaturGeriffeltes Glas (Fluted Glass)

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

  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 · SeiteTabs und Segmente mit Pfeiltasten · AutomatischAkkordeon mit Höhenanimation auf auto · FAQ Fahrschule
  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 ScrollenProzess-/Timeline-Sektion mit wachsender 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 · LeistungslisteLeistungsseite: Antwort zuerst · 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
  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 · FAQKontakt- und Anfrageformular als eigene Sektion
  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 KondolenzbuchKopieren-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) · StillNatives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · 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 · Statement-Satz
  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 · KarteKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · KartenbildStandortfinder als Liste · Nur ListeFirmendaten aus einer Quelle · Kfz-Werkstatt
  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 · ErklärungZoom- und textabstandfestes Layout

Nicht verwenden

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.
Bild und Ton
  • 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.
  • 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 schreiben: „unvergesslicher Abschied“, Floskel-Ketten, Verkaufssprache, „2.000 Bestattungen im Jahr“ als Botschaft.
Hero, Raum und Form
  • Hero-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.
  • Hero-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.
  • Sektionsabstand: clamp(80px, 10vw, 152px)
  • Dichte: luftig
  • Raum: Viel Ruhe um wenige Elemente: Schritte nach Sterbeort mit 24 px Abstand, Knöpfe mindestens 48 px hoch, nichts gedrängt.
  • Spalten: 12
  • 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
  • Schatten: keiner
  • Form: Fast eckig und still. Haupthandlung als Textlink mit Pfeil (pfeil-icon-button, Variante linie) oder Moosgrün gefüllt; keine Pille.
Vorbilder