{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "mehrschritt-anfrage",
 "name": "Mehrschritt-Anfrage mit Zusammenfassung",
 "name_en": "Multi-step request form with progress and review step",
 "kurz": "Anmeldung in vier kurzen Schritten mit Schrittleiste, Prüfseite mit „Ändern“ vor dem Senden und Zurück ohne Datenverlust; der Schritt gleitet per View Transition, der Fokus landet auf seiner Überschrift.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "klar",
  "freundlich",
  "vertrauenswürdig"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "view-transitions",
  "form"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine Anmeldung oder Anfrage in drei bis vier kurzen Schritten statt eines langen Formulars. Oben steht, wo man ist (Schritt 2 von 4) und was noch kommt. Vor dem Senden zeigt ein eigener Schritt alle Angaben mit „Ändern“ je Abschnitt. Zurück verliert nichts, weil alle Schritte in einem Formular liegen und nur ausgeblendet werden. Fehler erscheinen erst nach Interaktion oder beim Versuch weiterzugehen. Der Schrittwechsel gleitet per View Transition, der Fokus springt auf die Überschrift des neuen Schritts.",
  "warum_es_wirkt": "Kleine Portionen wirken machbar. Der Fortschritt zeigt, dass es bald geschafft ist. Die Zusammenfassung gibt eine zweite Chance, Fehler zu sehen, bevor etwas abgeschickt ist. Wer zurückgeht und alles wiederfindet, vertraut dem Formular.",
  "wann_einsetzen": "Anmeldungen und Anfragen mit mehr als etwa sechs Feldern, die sich in Themen gliedern: Fahrschule (Klasse, Daten, Termin), Handwerk (Leistung, Objekt, Kontakt), Kanzlei (Anliegen, Kontakt), Kurse, Mitgliedsanträge im Verein.",
  "wann_nicht": "Bei drei oder vier Feldern (Kontakt, Newsletter): ein Schritt reicht. Nicht, um ein zu langes Formular zu verstecken; erst Felder streichen. Keine automatische Weiterleitung beim Antippen einer Auswahl, das überrascht und stört Tastatur und Screenreader.",
  "varianten": [
   "Schrittleiste mit Namen der Schritte über dem Formular",
   "Kompakter Fortschrittsring mit „Schritt 2 von 4“ und „Als Nächstes“",
   "Senkrechter Stepper: alle Schritte untereinander, erledigte zugeklappt mit Kurzfassung und „Ändern“",
   "PLZ zuerst (Pflegedienst, Handwerk, Hol- und Bringdienst): „Kommen wir zu Ihnen?“ mit Ja, auf Anfrage oder Nein und Anfahrtspauschale, danach die kurze Anfrage",
   "Eine Frage pro Seite (GOV.UK-Prinzip) für Behörden- und Kanzlei-Anfragen",
   "Echte Seiten pro Schritt (Server, MPA) mit Cross-Document View Transitions"
  ],
  "umsetzung": "Alle Schritte liegen in einem <form novalidate>, jeder als <section data-schritt> mit eigener Überschrift (tabindex=-1). Nicht aktive Schritte bekommen hidden, ihre Werte bleiben. „Weiter“ prüft nur die Felder des Schritts (validity), setzt .versucht am Schritt und fokussiert das erste fehlerhafte Feld; sonst zeigen :user-invalid und :user-valid erst nach Interaktion. Wechsel: html.dataset.richtung = 'vor' | 'zurueck'; document.startViewTransition(() => zeige(n)); danach Überschrift fokussieren, document.title = 'Schritt n von 4: …'. ::view-transition-old(schritt) 160 ms, ::view-transition-new(schritt) 220 ms, translateX ±24 px, cubic-bezier(0.4, 0, 0.2, 1). Mit :root { view-transition-name: none } bleibt der Rest der Seite live, Fortschrittslinie und Auto laufen parallel. Ohne API kurze CSS-Einblendung. Prüfseite aus den Formularwerten als <dl> je Abschnitt; „Ändern“ springt in den Schritt und zeigt statt Weiter „Zur Übersicht“ (GOV.UK-Prinzip). Entwurf mit Schritt in sessionStorage, nach dem Senden löschen. Echte Mehrseiten-Formulare (Server) nutzen dieselbe Bewegung über Cross-Document View Transitions (@view-transition { navigation: auto }).",
  "mobil": "Schrittleiste wird zu Balken mit „Schritt 2 von 4“. Weiter und Zurück als feste Leiste am unteren Rand, große Ziele. Eingaben mindestens 16 px gegen Zoom. Passende inputmode- und autocomplete-Werte.",
  "reduzierte_bewegung": "Keine View Transition, der Schritt wechselt sofort. Fokus und Ansage bleiben.",
  "barrierefreiheit": "Schrittliste als <ol> mit aria-current=\"step\" und verstecktem Text „erledigt“. Fortschritt im Seitentitel und in der Überschrift. Fokus beim Wechsel auf die Überschrift des neuen Schritts, nicht auf das erste Feld (sonst fehlt der Zusammenhang). Fehler über aria-invalid und aria-describedby, Statuszeile mit role=\"status\". „Ändern“-Knöpfe mit verstecktem Zusatz (z. B. „Ändern: Führerscheinklasse“). Keine Zeitlimits. Zurück ist ein echter Knopf, kein Link ins Leere (WCAG 3.3.4 Fehlervermeidung durch Prüfschritt, 2.4.3 Fokusreihenfolge, 3.3.1 Fehlererkennung)."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
  "dauer_ms": "Schrittwechsel 160 (alt) und 220 (neu), Fortschritt 220, Felder 150",
  "stagger_ms": "",
  "distanz": "24 px seitlich, Richtung nach vor/zurück",
  "sonstiges": "Formular-Tempo nach Rezept fahrschule-freundlich-buchbar (Formulare 150–200 ms ohne Federung)",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept fahrschule-freundlich-buchbar, bewegung.regel"
 },
 "kurve": {
  "bezier": [
   0.4,
   0.0,
   0.2,
   1.0
  ],
  "css": "cubic-bezier(0.4, 0, 0.2, 1)",
  "name": "Material Standard",
  "dauer_ms": 160
 },
 "gesehen_bei": [
  {
   "seite": "GOV.UK Design System: Check answers",
   "url": "https://design-system.service.gov.uk/patterns/check-answers",
   "auszeichnung": "",
   "beobachtung": "Prüfseite direkt vor der Bestätigung: alle Antworten als Zusammenfassungsliste, je Zeile ein „Change“-Link mit verstecktem Text für Screenreader. Nach dem Ändern geht es zurück zur Prüfseite, nicht durch alle Schritte; übersprungene optionale Fragen stehen als „Not provided“ da.",
   "art": "artikel"
  },
  {
   "seite": "W3C WAI Tutorials: Multi-page Forms",
   "url": "https://w3.org/WAI/tutorials/forms/multi-page/",
   "auszeichnung": "",
   "beobachtung": "Lange Formulare in logische Schritte teilen. Fortschritt im Seitentitel zuerst nennen („Step 2 of 4: …“) und in der Hauptüberschrift wiederholen. Schrittliste als geordnete Liste, erledigte Schritte verlinkt, aktuelle und erledigte Schritte mit verstecktem Text markiert.",
   "art": "tutorial"
  },
  {
   "seite": "Rezept-Bestand Fundus: Fahrschule „Anmeldung in 3 Schritten“",
   "url": "https://www.tofudriving.com/",
   "auszeichnung": "",
   "beobachtung": "Im Rezept fahrschule-freundlich-buchbar bisher aus fortschrittsring, validierung-nach-interaktion und checkbox-radio-animiert zusammengesetzt. TOFU Driving (live geprüft 31.10.2026) führt alle CTAs auf eine Buchungsstrecke (/contact#book); das Formular selbst bleibt nüchtern.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "W3C WAI: Multi-page Forms",
   "url": "https://w3.org/WAI/tutorials/forms/multi-page/"
  },
  {
   "titel": "GOV.UK Design System: Check answers",
   "url": "https://design-system.service.gov.uk/patterns/check-answers"
  },
  {
   "titel": "MDN: Document.startViewTransition()",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition"
  },
  {
   "titel": "Chrome for Developers: Same-document view transitions",
   "url": "https://developer.chrome.com/docs/web-platform/view-transitions/same-document"
  }
 ],
 "kombinierbar_mit": [
  "validierung-nach-interaktion",
  "fortschrittsring",
  "checkbox-radio-animiert",
  "animiertes-select",
  "button-zustaende",
  "kontakt-anfrage-formular",
  "termin-buchung-zwei-klick"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "Belege sind Richtlinien (GOV.UK, W3C WAI) und der Rezept-Bestand; eine deutsche KMU-Website mit vorbildlicher Mehrschritt-Anfrage fehlt noch.",
   "Bewegungswerte eigene Festlegung nach Rezept fahrschule-freundlich-buchbar, nicht gemessen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Anmeldung in vier kurzen Schritten mit Schrittleiste, Prüfseite mit „Ändern“ vor dem Senden und Zurück ohne Datenverlust; der Schritt gleitet per View Transition, der Fokus landet auf seiner Überschrift.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.4, 0, 0.2, 1) für Schrittwechsel, Fortschritt und Felder (Formular-Tempo ohne Federung)",
   "dauer_alt_ms": 160,
   "dauer_neu_ms": 220,
   "distanz": "24 px seitlich; vor: alt nach links, neu von rechts; zurück gespiegelt (data-richtung am <html>)",
   "fortschritt": "Linie scale 0 → 1 und Ring stroke-dashoffset in 220 ms",
   "felder_ms": 150,
   "knopf": "transform 350 ms cubic-bezier(0.34, 1.56, 0.64, 1), nur auf Knöpfen und Auswahlpunkten",
   "auto_strasse": "800 ms expo.out (1 − 2^(−10t)) entlang SVG-Pfad, Deko",
   "fokus_marke": "gelbe Unterlegung der Überschrift bei :focus, background-size 0 → 100 % in 220 ms",
   "geaendert": "geänderte Werte in der Übersicht gelb hinterlegt, verblassen in 1200 ms",
   "view_transition": "view-transition-name: schritt auf dem Formular, :root view-transition-name: none (Rest bleibt live)",
   "fallback": "ohne startViewTransition: @keyframes vt-rein 220 ms auf dem neuen Schritt",
   "farben": "#f8f8ec Grund, #142b50 Navy, #ffd60a Kennzeichen-Gelb nur als Fläche, #b42318 Fehler, #1b7a4a gültig"
  },
  "ausloeser": "klick",
  "touch": "Unter 560 px eine Spalte, Weiter/Zurück als sticky Leiste am unteren Rand der Karte mit Schatten, Schrittleiste zeigt nur den Namen des aktuellen Schritts. Eingaben 17 px gegen Zoom, Geburtsdatum als drei Felder mit inputmode numeric, größere Auswahlflächen ohne Hover.",
  "reduziert": "Keine View Transition und keine Einblendung: der Schritt wechselt sofort, das Auto springt, kein Tipp-Kreis. Fokus auf die Überschrift, Seitentitel und Statusmeldungen bleiben.",
  "korrekturen": {
   "umsetzung": "Alle Schritte liegen in einem <form novalidate>, jeder als <section data-schritt> mit eigener Überschrift (tabindex=-1). Nicht aktive Schritte bekommen hidden, ihre Werte bleiben. „Weiter“ prüft nur die Felder des Schritts (validity), setzt .versucht am Schritt und fokussiert das erste fehlerhafte Feld; sonst zeigen :user-invalid und :user-valid erst nach Interaktion. Wechsel: html.dataset.richtung = 'vor' | 'zurueck'; document.startViewTransition(() => zeige(n)); danach Überschrift fokussieren, document.title = 'Schritt n von 4: …'. ::view-transition-old(schritt) 160 ms, ::view-transition-new(schritt) 220 ms, translateX ±24 px, cubic-bezier(0.4, 0, 0.2, 1). Mit :root { view-transition-name: none } bleibt der Rest der Seite live, Fortschrittslinie und Auto laufen parallel. Ohne API kurze CSS-Einblendung. Prüfseite aus den Formularwerten als <dl> je Abschnitt; „Ändern“ springt in den Schritt und zeigt statt Weiter „Zur Übersicht“ (GOV.UK-Prinzip). Entwurf mit Schritt in sessionStorage, nach dem Senden löschen. Echte Mehrseiten-Formulare (Server) nutzen dieselbe Bewegung über Cross-Document View Transitions (@view-transition { navigation: auto })."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Anmeldung der erfundenen Fahrschule Lahnblick, Gießen (Rezept fahrschule-freundlich-buchbar): Creme #f8f8ec, Navy #142b50, Kennzeichen-Gelb nur als Fläche, Bricolage Grotesque (opsz 96) für Titel, Atkinson Hyperlegible Next für Text. Links eine gezeichnete Straße mit vier Haltepunkten, auf der ein Fahrschulauto zum aktuellen Schritt fährt (SVG, Deko, aria-hidden). Die Vorführung wählt Klasse B, tippt Daten, scheitert einmal an der fehlenden E-Mail (Fehler erst jetzt), korrigiert, wählt Termine, prüft, ändert über „Ändern“ die Klasse auf B197 (Schritt 1 hat B noch gewählt), kehrt zur Übersicht zurück (geänderte Zeile leuchtet), willigt ein und sendet. Referenzen: design-system.service.gov.uk, w3.org/WAI, tofudriving.com (aus dem Rezept). AD-Review 02.11.2026: Note 4. Fehlerzustand (Zusammenfassung, Fokus auf erstes Feld) per Playwright geprüft. Zugang 02.11.2026: Kennzeichen-Schild: Selektor .marke span traf auch das Schild (helle Schrift auf Gelb, 1,2:1), jetzt .marke p span, Schild wieder Nacht auf Gelb wie geplant; Knopfrahmen im Kontrastmodus. Korrektur 02.11.2026: Variante „PLZ zuerst“ (plz) in der Welt von pflege-dienst-naehe (Pflegedienst am Isarbogen, Landshut): Einstieg „Kommen wir zu Ihnen?“, Antwort Ja (mit oder ohne Anfahrtspauschale), auf Anfrage oder Nein mit Pflegestützpunkt-Hinweis, dann Hilfe und Rückruf in zwei kurzen Schritten; keine Gesundheitsdaten außer freiwilligem Pflegegrad. Eigener Block neben der Fahrschul-Anmeldung, Vorführung tippt Nein, auf Anfrage, Ja und schickt ab. Pult-Knöpfe brechen unter 320 px um. Literata neu in assets/fonts (OFL, Latin-woff2 aus google/fonts). Geprüft: pruef.sh --v plz, zugang regeln/breite320 ohne Befund.",
  "varianten": [
   {
    "id": "leiste",
    "name": "Schrittleiste",
    "wann": "Standard für Anmeldungen mit drei bis vier benannten Schritten (Fahrschule, Kurs, Verein), wenn die Sektion volle Breite hat.",
    "werte": {
     "fortschritt": "ol mit vier Punkten, Linie scale 220 ms",
     "wechsel": "Formular gleitet 24 px, 160/220 ms"
    },
    "knopf": "Schrittleiste"
   },
   {
    "id": "ring",
    "name": "Fortschrittsring",
    "wann": "Wenig Platz oder Formular in einer schmalen Spalte bzw. einem Dialog; zeigt „Noch n Schritte“ und „Als Nächstes“.",
    "werte": {
     "fortschritt": "SVG-Ring r 23,13, stroke 5, dashoffset 220 ms",
     "wechsel": "Formular gleitet 24 px, 160/220 ms"
    },
    "knopf": "Ring"
   },
   {
    "id": "senkrecht",
    "name": "Senkrechter Stepper",
    "wann": "Längere Anfragen (Handwerk, Kanzlei), bei denen man die erledigten Angaben im Blick behalten will; erledigte Schritte zeigen eine Kurzfassung mit „Ändern“.",
    "werte": {
     "fortschritt": "Schritte untereinander, erledigte zugeklappt",
     "wechsel": "je Schritt eigener view-transition-name (s1 bis s4), Größe und Lage morphen in 220 ms"
    },
    "knopf": "Senkrecht"
   },
   {
    "id": "plz",
    "name": "PLZ zuerst",
    "knopf": "PLZ zuerst",
    "wann": "Pflegedienst, Handwerk, Hol- und Bringdienst der Werkstatt, Lieferdienst: Wer nur in einem Einzugsgebiet arbeitet, fragt zuerst „Kommen wir zu Ihnen?“ und antwortet sofort mit Ja (mit oder ohne Anfahrtspauschale), auf Anfrage oder Nein (mit Hinweis, wer sonst hilft); erst dann folgt die kurze Anfrage. Welt des Rezepts pflege-dienst-naehe.",
    "werte": {
     "rezept": "pflege-dienst-naehe (Pflegedienst am Isarbogen, Landshut)",
     "schrift": "Literata 600 (h1 clamp(2.5rem, 1.8rem + 3vw, 4rem)/1.1, h2 clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem)); Hanken Grotesk 1.25rem/1.6 Text, kleinste Schrift 1rem; Felder und Knöpfe min. 56 px hoch, 1.25rem",
     "farben": "#faf7f2 Grund, #1f1b16 Text, #5b2a4a Pflaume (Tafel, Überschriften, Ja-Antwort), #ffc845 Sonnengelb nur für Weiter/Anfragen mit 2 px Rand #1f1b16, #fff1cc Fläche „auf Anfrage“, #4a443d leise (9:1), #d8d0c4 Linien, #a3241a Fehler",
     "kurve": "öffnen 300 ms cubic-bezier(0.16, 1, 0.3, 1), schließen 200 ms cubic-bezier(0.7, 0, 0.84, 0) (token-toggle-asymmetrisch); Weg höchstens 8 px",
     "antworten": "Ja ohne Pauschale (Kerngebiet), Ja mit „Anfahrtspauschale 4,90 € je Einsatz“, Auf Anfrage mit 7,50 € und Anrufen/Trotzdem anfragen, Nein mit Pflegestützpunkt-Hinweis und „Andere Postleitzahl“; Antwort in role=\"status\", Symbol plus Text (nicht nur Farbe)",
     "schritte": "1 Wohnort (PLZ, inputmode numeric, autocomplete postal-code) → 2 Hilfe (Checkboxen mit Alltagswort und Fachwort, ab wann, Pflegegrad freiwillig) → 3 Rückruf (Name, Telefon, vormittags/nachmittags) → Danke mit Zusammenfassung; Fortschritt „Schritt n von 3“ plus drei Balken",
     "daten": "Einzugsgebiet als Objekt PLZ → [Ort, ja|anfrage, Pauschale]; Beträge sind Beispielwerte vom Kunden"
    }
   }
  ]
 }
}