{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "absenden-zu-bestaetigung",
 "name": "Absenden wird Bestätigung",
 "name_en": "Submit to confirmation morph",
 "kurz": "Die Kurzbewerbung eines Elektrobetriebs wird nach dem Absenden selbst zur Bestätigung: der rote Knopf schrumpft zum Haken, die weiße Fläche färbt sich tannengrün, Fehler lassen alle Eingaben stehen.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise",
  "verspielt",
  "warm"
 ],
 "stimmung_roh": [
  "freundlich",
  "klar",
  "warm"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "view-transitions",
  "form",
  "aria-live"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Formular durchläuft nach dem Klick auf Absenden vier Zustände: bereit, wird gesendet, gesendet oder fehlgeschlagen. Beim Senden bleibt der Knopf gleich breit, die Felder werden schreibgeschützt und behalten ihre Werte. Bei Erfolg verwandelt sich die Formularfläche in die Bestätigung: gleiche Fläche, neuer Inhalt, mit Eingangsnummer, nächsten Schritten mit Zeitangabe und einer Zusammenfassung der Angaben. Der Fokus springt auf die Überschrift der Bestätigung. Bei einem Fehler bleibt alles stehen, eine Meldung sagt, was passiert ist und was jetzt hilft, und der Knopf heißt „Erneut senden“.",
  "warum_es_wirkt": "Der Moment nach dem Absenden entscheidet, ob jemand dem Betrieb vertraut. Eine Fläche, die sich in die Antwort verwandelt, zeigt ohne Worte: Das Formular ist angekommen, hier ist das Ergebnis. Ein Seitenwechsel oder ein verschwindendes Formular lässt dagegen offen, ob etwas passiert ist. Wer nach einem Fehler seine Eingaben noch hat, versucht es noch einmal statt abzubrechen.",
  "wann_einsetzen": "Überall, wo ein Formular abgeschickt wird: Kontakt, Rückruf, Kurzbewerbung, Terminanfrage, Newsletter, Gutschein-Anfrage. Pflicht in allen Rezepten mit Anfrage oder Bewerbung.",
  "wann_nicht": "Wenn nach dem Absenden ein echter Folgeschritt kommt (Bezahlung, Konto anlegen): dann führt der Erfolg direkt dorthin. Nicht als Ersatz für eine Danke-Seite, wenn der Betrieb eine eigene URL für Messung oder Lesezeichen braucht; dann dieselbe Bestätigung auf der Danke-Seite. Keine Antwortzeit versprechen, die der Betrieb nicht hält.",
  "varianten": [
   "Karte: Formularfläche wird zur Bestätigungskarte mit Eingangsnummer, nächsten Schritten und Angaben (Kurzbewerbung, Anfrage)",
   "Zeile: einzeiliges Rückruf- oder Newsletter-Formular, Knopf und Feld werden zur Bestätigungszeile",
   "In beiden: Fehler mit erhaltenen Eingaben und Telefon als Ausweg, Offline-Hinweis, Hinweis bei langsamer Antwort, „Angaben korrigieren“ führt zurück"
  ],
  "umsetzung": "Ein echtes <form> mit method und action, damit es ohne JS auf eine Danke-Seite führt. Mit JS: submit abfangen, gegen Doppelklick sperren, Felder readOnly statt disabled (Werte bleiben lesbar und gehen nicht verloren), Knopf mit fester Breite und aria-disabled, Zustand am Formular als data-zustand (bereit, sendet, gesendet, fehler). fetch mit AbortController und Zeitgrenze. Bei Erfolg: document.startViewTransition(() => Bestätigung einsetzen) mit view-transition-name auf der Fläche, damit Größe und Lage gleiten; ohne View Transitions eine FLIP-Höhenanimation. Danach Fokus auf die Überschrift der Bestätigung (tabindex=-1) und eine kurze Ansage in einer aria-live=polite-Region, die schon beim Laden im DOM steht. Bei Fehler: Meldung mit role=alert über dem Knopf, Eingaben bleiben, Knopf heißt „Erneut senden“, Telefon als Ausweg. Offline (navigator.onLine false) gar nicht erst senden, sondern sagen, dass keine Verbindung besteht.",
  "mobil": "Die Bestätigung steht an derselben Stelle wie das Formular, die Seite springt nicht. Nach dem Morph scrollt die Überschrift in den sichtbaren Bereich, falls die Tastatur sie verdeckt hat. Knöpfe mindestens 48 px hoch, Telefonnummer als tel:-Link.",
  "reduzierte_bewegung": "Kein Gleiten und kein Haken-Strich: die Bestätigung erscheint mit kurzer Überblendung, der Haken steht sofort.",
  "barrierefreiheit": "Zustand nie nur über Farbe oder Spinner: Der Knopf sagt „Wird gesendet …“. Eine aria-live=polite-Region sagt „Bewerbung gesendet“, Fehler kommen mit role=alert. Fokus nach Erfolg auf die Überschrift der Bestätigung, nach Fehler bleibt er am Knopf. readOnly statt disabled, damit Screenreader die Werte weiter vorlesen. Kontrast der Meldungen mindestens 4,5 : 1."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1) öffnen, cubic-bezier(0.7, 0, 0.84, 0) schließen, Haken cubic-bezier(0.34, 1.56, 0.64, 1)",
  "dauer_ms": "280 Morph, 190 Schließen, 400 Haken",
  "stagger_ms": "40",
  "distanz": "8 px",
  "sonstiges": "Hinweis „dauert länger“ nach 4000 ms, Abbruch nach 15000 ms",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept arbeitgeber-karriere (token-federnd-verspielt, UI token-toggle-asymmetrisch)"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 280
 },
 "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: Eine Bestätigung nennt eine Referenznummer, falls es eine gibt, was als Nächstes passiert und wann, und die Kontaktdaten des Dienstes. Sie soll versichern, dass der Vorgang abgeschlossen ist. Links in der farbigen Bestätigungsfläche brauchen eigenen Fokusstil mit 3 : 1.",
   "art": "artikel"
  },
  {
   "seite": "Fundus intern: button-zustaende und Starter handwerk-werkstatt-klartext/kontakt.html",
   "url": "",
   "auszeichnung": "",
   "beobachtung": "Laut Recherche Runde 4 zeigt button-zustaende Laden und Erfolg nur am Knopf; der Starter baut den Danke-Zustand selbst. Ein Muster für den Übergang vom Formular zur Bestätigung fehlt.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: View Transition API",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API"
  },
  {
   "titel": "MDN: ARIA live regions",
   "url": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions"
  },
  {
   "titel": "web.dev: Interop 2026",
   "url": "https://web.dev/blog/interop-2026"
  }
 ],
 "kombinierbar_mit": [
  "button-zustaende",
  "validierung-nach-interaktion",
  "formular-fehlerzusammenfassung",
  "kontakt-anfrage-formular",
  "mehrschritt-anfrage",
  "spinner-ladeindikator",
  "toast-stapel"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/absenden-zu-bestaetigung/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/absenden-zu-bestaetigung/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/absenden-zu-bestaetigung/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Recherche Runde 4 (04.11.2026): Lücke im Bestand, kein Award-Beleg. View Transitions sind Interop-2026-Schwerpunkt.",
   "Belege 04.11.2026: GOV.UK Design System (Confirmation pages) geöffnet. Zwei Websites mit dem Morph noch suchen; Awwwards-Übersichten sind gesperrt."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die Kurzbewerbung eines Elektrobetriebs wird nach dem Absenden selbst zur Bestätigung: der rote Knopf schrumpft zum Haken, die weiße Fläche färbt sich tannengrün, Fehler lassen alle Eingaben stehen.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) Morph und Öffnen; cubic-bezier(0.7, 0, 0.84, 0) zurück zum Formular; cubic-bezier(0.34, 1.56, 0.64, 1) nur Haken-Ring",
   "dauer_ms": {
    "morph": 280,
    "zurueck": 190,
    "haken": 400,
    "ui_farbe": 150,
    "alt_ausblenden": 120,
    "neu_einblenden": "200 ab 80"
   },
   "stagger_ms": 40,
   "distanz": "Meldung und Schritte 8 px von oben, Haken-Ring scale .72 → 1",
   "view_transition_namen": "flaeche (Formularfläche ↔ Bestätigung), knopf (Absende-Knopf ↔ Haken-Kreis); Zeile: zeile, zknopf",
   "zustaende": "data-zustand bereit | sendet | gesendet | fehler; Felder readOnly statt disabled, Knopf aria-disabled mit fester Breite min-width 15.5rem",
   "zeitgrenzen": "Hinweis „dauert länger als sonst“ nach 4000 ms, Abbruch nach 15000 ms",
   "ladebalken": "3 px am Knopfboden, scaleX 0 → 1 → 0 in 1600 ms, wiederholt",
   "fehler_wackeln": "380 ms, ±6/5/3 px waagerecht, nur ohne reduzierte Bewegung",
   "fokus": "nach Erfolg Überschrift der Bestätigung (tabindex=-1, ohne Ring), nach Fehler bleibt er am Knopf; Ansage über aria-live=polite, Fehler role=alert",
   "farben": "Kreide #F6F3EC, Fläche #FFFDF8, Tinte #161616, leise #5A5650, Zettel #EFE6D2, Tannengrün #1D4A3A, Klatschmohn #C8382A (Haken-Kreis auf Tanne mit 2 px Kreide-Ring)",
   "schrift": "Funnel Display 700/600 für Titel, Funnel Sans 400–700 für Text und Felder"
  },
  "ausloeser": "klick",
  "touch": "Gleiches Verhalten wie am Desktop; Knopf volle Breite und 56 px hoch, Telefonfeld mit type=tel und enterkeyhint=send. Die Bestätigung steht an derselben Stelle, ist die Überschrift außerhalb des Bildes, scrollt sie mittig hinein.",
  "reduziert": "Keine View Transition und kein Wackeln: Formular und Bestätigung tauschen sofort, die Bestätigung blendet in 150 ms ein, der Haken steht sofort. Der Ladebalken entfällt, „Wird gesendet …“ bleibt.",
  "korrekturen": {
   "varianten": [
    "Karte: Formularfläche wird zur Bestätigungskarte mit Eingangsnummer, nächsten Schritten und Angaben (Kurzbewerbung, Anfrage)",
    "Zeile: einzeiliges Rückruf- oder Newsletter-Formular, Knopf und Feld werden zur Bestätigungszeile",
    "In beiden: Fehler mit erhaltenen Eingaben und Telefon als Ausweg, Offline-Hinweis, Hinweis bei langsamer Antwort, „Angaben korrigieren“ führt zurück"
   ]
  },
  "geprueft": "04.11.2026",
  "notiz": "Welt: Rezept arbeitgeber-karriere, erfundener Elektrobetrieb Elektro Quast in Stadthagen (Recruiting-Seite „Elektroniker:in für Gebäudetechnik“, du-Ansprache, Jana Quast als Werkstattleitung). Karte: links Stellenfakten und ein gedrehter Abzug (handwerk-heizraum-hoch.webp), rechts die Kurzbewerbung; nach dem Absenden gleitet die Fläche per View Transition in die tannengrüne Bestätigung, der Knopf wird zum Haken-Kreis. Zeile: Rückruf in einem Tannengrün-Band mit Collage (handwerk-waermepumpe.webp, Zettel). Pult: Variante und Server-Antwort (Erfolg, Fehler, Langsam, Offline). Vorführung tippt Name und Nummer, scheitert jede zweite Runde einmal, sendet erneut. Abgrenzung: button-zustaende zeigt Zustände nur am Knopf, kontakt-anfrage-formular die Sektion; hier geht es um den Übergang Formular zu Bestätigung. Antwortzeiten in der Bestätigung sind Beispiel, im Projekt nur zusagen, was der Betrieb hält. Selbsturteil 4.",
  "varianten": [
   {
    "id": "karte",
    "name": "Karte: Formular wird Bestätigungskarte",
    "wann": "Kurzbewerbung, Kontakt- oder Terminanfrage mit zwei bis fünf Feldern in einer eigenen Fläche (arbeitgeber, handwerk, praxis, eventlocation).",
    "werte": {
     "flaeche": "weiß #FFFDF8 → Tannengrün #1D4A3A per View Transition 280 ms",
     "knopf": "Klatschmohn-Knopf → Haken-Kreis 64 px",
     "inhalt": "Eingangsnummer mit Uhrzeit, drei nächste Schritte (Versatz 40 ms), Angaben als details, „Angaben korrigieren“ zurück in 190 ms"
    }
   },
   {
    "id": "zeile",
    "name": "Zeile: Rückruf wird Bestätigungszeile",
    "wann": "Einzeilige Formulare wie Rückruf, Newsletter oder Warteliste, im Band oder im Footer (arbeitgeber, kfz, pflege, kultur).",
    "werte": {
     "form": "Feld und Knopf auf Kreide-Fläche 44rem breit; Erfolg: Haken 56 px links, Text „Notiert …“ mit Nummer, Knopf „Nummer ändern“",
     "view_transition_namen": "zeile, zknopf",
     "collage": "Abzug 3:2 um 2,5° gedreht, Zettel um −3°, ab 900 px"
    }
   }
  ]
 }
}