{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "danke-seite-naechste-schritte",
 "name": "Danke-Seite: was jetzt passiert",
 "name_en": "Confirmation page with next steps",
 "kurz": "Nach dem Absenden: Satz mit dem, was angekommen ist, Vorgangsnummer als Schlüsselanhänger, Zeitleiste mit Fristen in Werktagen, Kalender-Datei, Zusammenfassung mit „Ändern“ und Rückfrage-Kontakt, ohne Tracking-Zwang.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise",
  "warm"
 ],
 "stimmung_roh": [
  "klar",
  "vertrauenswürdig",
  "persönlich"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "intl",
  "svg",
  "ics"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Die Seite nach dem Absenden eines Formulars. Oben steht in einem Satz, was angekommen ist, mit Vorgangsnummer. Darunter folgt eine Zeitleiste: was als Nächstes passiert, wer es tut und bis wann. Eine Zusammenfassung zeigt die gesendeten Angaben, damit Besucher Fehler sofort sehen und korrigieren können. Bei einem festen Termin gibt es eine Kalender-Datei (.ics) zum Speichern. Ein Rückfrage-Kontakt mit Name und Telefon steht direkt daneben. Die Seite funktioniert ohne Tracking-Zwang: kein Consent-Banner als Hürde, Messung höchstens nach Einwilligung.",
  "warum_es_wirkt": "Nach dem Klick auf „Senden“ ist die Unsicherheit am größten: Ist es angekommen, wann meldet sich jemand, muss ich noch etwas tun? Design-Systeme der öffentlichen Hand verlangen deshalb auf der Bestätigungsseite genau diese Teile: Vorgangsnummer, was als Nächstes passiert und wann, Kontakt und eine Möglichkeit, die Bestätigung zu speichern. Eine generische „Vielen Dank für Ihre Nachricht“-Seite beantwortet keine dieser Fragen und erzeugt Rückrufe.",
  "wann_einsetzen": "Nach jedem Formular einer Kundenseite: Anfrage, Terminbuchung, Rückrufwunsch, Anmeldung, Bewerbung, Newsletter mit Double-Opt-In. Als eigene Adresse (z. B. /anfrage/danke), damit Besucher sie als Beleg speichern können und die Website den Abschluss zählen kann, wenn eingewilligt wurde.",
  "wann_nicht": "Nicht als Toast oder kleine Meldung im Formular, wenn danach noch etwas zu tun ist. Keine Werbung, keine Gutscheine oder Newsletter-Abfragen vor den nächsten Schritten. Keine Zeitzusagen, die der Betrieb nicht einhält („Antwort in 2 Stunden“). Keine Konfetti-Effekte bei ernsten Anliegen (Praxis, Pflege, Kanzlei, Bestattung). Persönliche Daten nicht in die URL schreiben.",
  "varianten": [
   "Fester Termin: Datum, Uhrzeit, Ort, Kalender-Datei, Vorbereitung und Umbuchen",
   "Offene Anfrage: Antwort bis zu einem konkreten Werktag, Ablauf bis zum Angebot",
   "E-Mail bestätigen (Double-Opt-In): Hinweis auf das Postfach, erneut senden mit Wartezeit, Adresse korrigieren",
   "Direkt aufgerufen ohne Absenden: neutraler Zustand mit Weg zum Formular statt leerer Zusammenfassung"
  ],
  "umsetzung": "Eigene Seite mit status 200 und noindex. Die Formulardaten kommen serverseitig aus der Sitzung bzw. über eine kurzlebige Vorgangs-ID, nie als Klartext in der URL. Aufbau: h1 sagt, was angekommen ist („Ihr Termin steht“, „Anfrage ist da“). Darunter die Vorgangsnummer mit Kopier-Knopf und der Hinweis auf die Bestätigungs-E-Mail. Die nächsten Schritte als geordnete Liste (ol) mit time-Elementen; der aktuelle Schritt trägt aria-current=step. Fristen aus Werktagen gerechnet (Wochenende und Feiertage überspringen), Ausgabe mit Intl.DateTimeFormat de-DE. Zusammenfassung als dl mit „Ändern“-Link je Gruppe zurück ins Formular. Kalender-Datei: VCALENDAR mit VEVENT, DTSTART/DTEND mit TZID=Europe/Berlin, UID aus der Vorgangsnummer, LOCATION, DESCRIPTION, Zeilenenden CRLF, Text escapen; als Blob mit type text/calendar und download-Name. Drucken bzw. als PDF speichern über window.print mit eigenem Druck-CSS. Fokus beim Laden auf die h1 (tabindex=-1), Zustandswechsel in aria-live=polite. Wird die Seite ohne Vorgang aufgerufen, zeigt sie einen neutralen Zustand mit Weg zum Formular. Messung nur nach Einwilligung, ohne Pixel im Kopf.",
  "mobil": "Eine Spalte: Bestätigung, nächste Schritte, Kalender-Knopf in voller Breite, Zusammenfassung, Kontakt. Telefon als tel:-Link mit großem Ziel. Die Zeitleiste steht senkrecht.",
  "reduzierte_bewegung": "Zeitleiste steht sofort, Zustände wechseln ohne Einblenden.",
  "barrierefreiheit": "Fokus nach dem Laden auf die h1, damit Screenreader die Bestätigung zuerst hören. Schritte als ol mit aria-current=step, Daten als time mit datetime. Kopier- und Sende-Rückmeldungen in aria-live=polite. Farbe nie allein als Status: jeder Schritt hat ein Wort (Erledigt, Als Nächstes, Später). Kalender-Knopf sagt, was er lädt („Termin als Kalender-Datei (.ics)“)."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen",
  "dauer_ms": "120 Hover, 250 Zustandswechsel und Aufklappen, 170 Schließen, 600 Zeitleiste zeichnet sich einmal",
  "stagger_ms": "90 je Schritt",
  "distanz": "8px beim Einblenden",
  "sonstiges": "Werte aus dem Rezept kfz-werkstatt-autohaus (token-toggle-asymmetrisch). Kein Konfetti, kein Überschwingen.",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept kfz-werkstatt-autohaus"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 120
 },
 "gesehen_bei": [
  {
   "seite": "GOV.UK Design System: Confirmation pages",
   "url": "https://design-system.service.gov.uk/patterns/confirmation-pages",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: Die Seite muss enthalten: Vorgangsnummer (falls vorhanden), was als Nächstes passiert und wann, Kontakt des Dienstes, Links zu dem, was Nutzer als Nächstes brauchen, Feedback-Link und eine Möglichkeit, einen Beleg zu speichern (z. B. als PDF). Nutzer setzen die Seite als Lesezeichen, deshalb soll sie wieder aufrufbar sein oder beim erneuten Aufruf hilfreich antworten.",
   "art": "artikel"
  },
  {
   "seite": "NHS digital service manual: Confirmation page",
   "url": "https://service-manual.nhs.uk/design-system/patterns/confirmation-page",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: Überschrift sagt, was der Nutzer getan hat; die Seite muss sagen, was als Nächstes passiert und wann. Referenznummer nur, wenn Menschen sie behalten müssen, und dann mit Erklärung. Wenige Bausteine, damit Screenreader-Nutzer nicht überfordert werden.",
   "art": "artikel"
  },
  {
   "seite": "Digital Scotland Design System: Form submission results page",
   "url": "https://designsystem.gov.scot/patterns/form-submission-results-page",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 04.11.2026: Hinweis auf die Bestätigungs-E-Mail mit „Spam-Ordner prüfen“, konkrete Frist („nach 10 Werktagen“), bei offenem Ergebnis was als Nächstes passiert und wann, Kontakt, Referenznummer. Die Ergebnisseite hat eine eigene URL, damit der Abschluss messbar ist.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "GOV.UK Design System: Confirmation pages",
   "url": "https://design-system.service.gov.uk/patterns/confirmation-pages"
  },
  {
   "titel": "Digital Scotland Design System: Form submission results page",
   "url": "https://designsystem.gov.scot/patterns/form-submission-results-page"
  }
 ],
 "kombinierbar_mit": [
  "kontakt-anfrage-formular",
  "mehrschritt-anfrage",
  "termin-buchung-zwei-klick",
  "formular-fehlerzusammenfassung",
  "oeffnungszeiten-status",
  "fehlerseite-leerzustand"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Die Recherche Runde 4 nennt keinen Website-Beleg, nur den internen Befund (Danke-Zustände in den Startern je eigen gebaut). Belege sind drei Leitlinien öffentlicher Design-Systeme, am 04.11.2026 abgerufen. Award-Seiten mit guter Danke-Seite fehlen noch.",
   "Datenschutz: welche Angaben die Danke-Seite zeigen darf und ob Messung nach dem Absenden einwilligungspflichtig ist, vom Kunden prüfen lassen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Nach dem Absenden: Satz mit dem, was angekommen ist, Vorgangsnummer als Schlüsselanhänger, Zeitleiste mit Fristen in Werktagen, Kalender-Datei, Zusammenfassung mit „Ändern“ und Rückfrage-Kontakt, ohne Tracking-Zwang.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen",
   "dauer_ms": "120 Hover, 250 Öffnen (ics-Vorschau, Meldung), 170 Schließen, 600 Zeitleiste zeichnet bis zum aktuellen Schritt, 400 je Schritt",
   "stagger_ms": 90,
   "distanz": "8px beim Einblenden der Schritte, ics-Vorschau 6px",
   "anhaenger": "rotate −9° → 5° → −2° → 0 in 1400 ms mit der Öffnen-Kurve, einmal beim Laden",
   "tiefen_taste": "Haupthandlung 4 px Tiefe (box-shadow), Druck translateY(4px)",
   "fristen": "Werktage Niedersachsen (Wochenende, bundesweite Feiertage, Ostern berechnet, 31.10.); Teile bis +1 Werktag 12 Uhr, Termin +6 Werktage 7:30–8:00, Rückruf Anfrage +2 Werktage 12 Uhr, Opt-in-Link 48 h",
   "ics": "VCALENDAR 2.0, VEVENT mit DTSTART/DTEND in UTC (Z), UID Vorgangsnummer@Domain, VALARM −PT14H, CRLF, Text escaped; Blob text/calendar; Vorschau als pre-wrap ohne Scrollbereich",
   "erneut_senden": "30 s Sperre mit Countdown im Knopf",
   "raster": "Bühne 1.5fr / 1fr, Hauptteil 1.55fr / 1fr, Seitenleiste nicht klebend (würde die Zusammenfassung verdecken); einspaltig unter 860 px",
   "farben": "Grund #F2F1ED, Asphalt #232629, Verkehrsgelb #F5B700 nur Haupthandlung und aktiver Schritt, Grün #7FD39B auf Asphalt für „Gebucht“",
   "vorfuehrung": "Neu zeichnen, 1700 ms Kopieren, 3400 ms Kalender-Taste mit ics-Vorschau, Schleife 9000 ms"
  },
  "ausloeser": "laden",
  "touch": "Einspaltig: Bestätigung, Knöpfe in voller Breite, Anhänger darunter, Zeitleiste senkrecht, Seitenleiste nach den Schritten. Feste Leiste unten mit Anrufen und der Haupthandlung (Kalender, Fotos oder erneut senden). Zusammenfassung untereinander.",
  "reduziert": "Zeitleiste, Schritte und Anhänger stehen sofort, Meldungen ohne Übergang.",
  "korrekturen": {},
  "geprueft": "04.11.2026",
  "notiz": "Welt: Rezept kfz-werkstatt-autohaus, erfundener Kfz-Meisterbetrieb Werkstatt Ohlhof (Sabine und Jens Ohlhof) in Northeim. Mona Sans (wdth 80, 800) und Google Sans Flex, Asphalt-Bühne, Verkehrsgelb nur für die Haupthandlung. Signatur: Vorgangsnummer als gelber Schlüsselanhänger, wie er in der Werkstatt am Schlüssel hängt. Fristen rechnen live aus dem heutigen Datum. Zustände: Termin (.ics, Vorbereitung), Anfrage (Fotos, Kostenrahmen), E-Mail bestätigen (Double-Opt-In, Adresse ändern mit Prüfung, erneut senden mit Sperre) und im Pult „Ohne Vorgang aufgerufen“ (auch ?leer). Fokus beim Laden auf der h1. Druck-CSS als Beleg. Belege: GOV.UK, NHS und Digital Scotland Design Systems (Leitlinien, keine Award-Seiten). Selbsturteil 4.",
  "varianten": [
   {
    "id": "termin",
    "name": "Fester Termin",
    "wann": "Werkstatt, Praxis, Salon, Beratung: Termin steht, Kalender-Datei, was mitbringen, umbuchen.",
    "werte": {
     "zeitleiste": "5 Schritte, Schritt 2 aktuell",
     "handlung": "Termin in den Kalender (.ics)",
     "figur": "Schlüsselanhänger mit Abgabe, Leistung, Kennzeichen"
    }
   },
   {
    "id": "anfrage",
    "name": "Offene Anfrage",
    "wann": "Angebot oder Kostenvoranschlag: Antwort bis zu einem konkreten Werktag, Ablauf bis zum Angebot, Fotos nachreichen.",
    "werte": {
     "zeitleiste": "4 Schritte, Antwort +2 Werktage 12 Uhr",
     "handlung": "Fotos nachreichen",
     "figur": "Schadenakte mit Fotozahl und Antwortfrist",
     "ics": "keine Datei, weil kein Termin"
    }
   },
   {
    "id": "bestaetigen",
    "name": "E-Mail bestätigen",
    "wann": "Newsletter, Erinnerung oder Konto mit Double-Opt-In: Postfach-Hinweis, erneut senden, Adresse korrigieren.",
    "werte": {
     "zeitleiste": "3 Schritte, Link 48 h",
     "handlung": "Link erneut senden, 30 s Sperre",
     "figur": "Umschlag mit Betreff und Frist, Einwurf 900 ms translateY(−14px) rotate(−3°)"
    }
   }
  ]
 }
}