{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "produktfinder-quiz",
 "name": "Produktfinder in wenigen Fragen",
 "name_en": "Product finder quiz with reasoned result",
 "kurz": "Vier Fragen mit Fortschritt und Zurück, danach ein Produkt mit Begründung aus den eigenen Antworten, zwei Alternativen, Neustart und teilbarem Link.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "editorial",
  "warm"
 ],
 "stimmung_roh": [
  "ruhig",
  "kuratiert",
  "warm"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "view-transitions"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Finder führt in drei bis fünf Fragen zu einem passenden Produkt. Jede Frage steht für sich, ein Fortschritt zeigt, wie weit es noch ist, „Zurück“ behält die Antworten. Das Ergebnis nennt ein Produkt und begründet es mit den eigenen Antworten („weil du … gewählt hast“). Darunter stehen zwei Alternativen und ein Neustart. Die Antworten stehen in der Adresse, so lässt sich das Ergebnis teilen und wieder öffnen.",
  "warum_es_wirkt": "Wer vor zwanzig Seren steht, will nicht vergleichen, sondern beraten werden. Die Begründung macht die Empfehlung nachvollziehbar und damit glaubwürdig. Alternativen nehmen den Druck, dass es nur eine richtige Antwort gibt.",
  "wann_einsetzen": "Hautpflege und Kosmetik, Shops mit erklärungsbedürftigen Produkten, Kurs- und Tarifwahl, Fahrschulklassen, Paket-Empfehlung bei Dienstleistern.",
  "wann_nicht": "Bei weniger als fünf Produkten (dann eine Vergleichstabelle). Wenn die Fragen Gesundheitsdaten berühren, ohne dass eine Fachperson dahintersteht. Nicht als Hürde vor dem Sortiment: die Produktliste bleibt immer direkt erreichbar.",
  "varianten": [
   "Schritt für Schritt: eine Frage je Ansicht mit Fortschritt",
   "Alles auf einer Seite: Antworten als Segmente, Ergebnis aktualisiert sich live",
   "Ergebnis mit Routine aus mehreren Produkten statt einem",
   "Ergebnis per Link teilen oder per E-Mail senden"
  ],
  "umsetzung": "Ein <form> mit einem <fieldset> je Frage, die Frage als <h2> in der <legend>, Antworten als Radio-Knöpfe in großen Feldern. „Weiter“ erst nach Auswahl aktiv, kein automatisches Weiterspringen (WCAG 3.2.2). Nach dem Wechsel Fokus auf die neue Überschrift (tabindex=\"-1\"). Zurück behält die Antworten. Auswertung über eine Punktetabelle; die Begründung baut sich aus den Antworten („Weil du „Rötungen“ gewählt hast, …“), nicht aus Werbetext. Antworten als Kurzcode in der URL, so lässt sich das Ergebnis teilen und neu laden. Teilen per navigator.share oder Zwischenablage, Rückmeldung in role=\"status\", Ausweichweg mit markiertem Link. Variante Live: alle Fragen als Chips, Ergebnis und Bild wechseln sofort.",
  "mobil": "Eine Frage füllt den Bildschirm, Antworten als volle Breite mit großen Zielen, „Weiter“ unten fest im Daumenbereich. Ergebnis untereinander: Produkt, Begründung, Alternativen.",
  "reduzierte_bewegung": "Fragen wechseln ohne Versatz und ohne Überblendung, Fortschritt springt.",
  "barrierefreiheit": "fieldset und legend je Frage, native Radio-Knöpfe mit sichtbarem Fokus. Kein Weiterspringen bei Auswahl (WCAG 3.2.2). Fokus auf die neue Frage, Fortschritt als Text. Ergebnis in einer Überschrift, Begründung als Liste. Teilen-Rückmeldung über role=\"status\"."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.25, 1, 0.5, 1)",
  "dauer_ms": "250 (Fragenwechsel, Auswahl), 1000 (Produktbild blendet über)",
  "stagger_ms": "40",
  "distanz": "Frage wechselt mit 16 px Versatz",
  "sonstiges": "Zwei Tempi wie im Rezept mode-beauty-kollektion: UI schnell, Bilder langsam (Toteme Karussell 1 s mit cubic-bezier(.25,1,.5,1))",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept mode-beauty-kollektion"
 },
 "kurve": {
  "bezier": [
   0.25,
   1.0,
   0.5,
   1.0
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Typology: Hautdiagnose",
   "url": "https://us.typology.com/library/interest-benefits-and-basis-of-the-skin-analysis",
   "auszeichnung": "",
   "beobachtung": "Online-Fragebogen mit etwa fünfzehn Fragen zu Empfinden, Beobachtung, Lebensstil und Umgebung; Ergebnis ist einer von 24 Hauttypen mit Routine für morgens und abends und Erklärung der Anliegen.",
   "art": "website"
  },
  {
   "seite": "Pulpe de Vie: Mon diagnostic de peau",
   "url": "https://www.pulpedevie.com/en/mon-diagnostic-de-peau/",
   "auszeichnung": "",
   "beobachtung": "Neun Fragen, davon vier mit Auswahl von Gesichtszonen und „so bestätigen“ zum Überspringen, danach Kontaktdaten und eine persönliche Pflegeroutine.",
   "art": "website"
  },
  {
   "seite": "Doofinder Glossar: Produkt-Quiz",
   "url": "https://www.doofinder.com/de/ecommerce-glossar/produkt-quiz-product-finder-quiz",
   "auszeichnung": "",
   "beobachtung": "Produkt-Quiz als Verkaufsberatung: kurze Fragen zu Vorlieben und Kontext statt Suche; Ergebnis als gefilterte Auswahl oder persönliche Empfehlung. Ladenbeispiel: „Mit drei oder vier Fragen hat sie genug.“",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: URLSearchParams",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams"
  },
  {
   "titel": "MDN: History.replaceState()",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState"
  },
  {
   "titel": "MDN: Navigator.share()",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share"
  }
 ],
 "kombinierbar_mit": [
  "fortschrittsring",
  "checkbox-radio-animiert",
  "flip-zustandswechsel",
  "kopieren-feedback",
  "toast-stapel",
  "mono-labels-versal"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "Typology und Pulpe de Vie nur über ihre Beschreibungsseiten geprüft, nicht im Browser durchgeklickt. Bewegungswerte eigene Festlegung nach Rezept.",
   "Keine Gesundheitsdaten (Schwangerschaft, Erkrankungen, Medikamente) in die URL schreiben; solche Fragen nur mit fachlicher Prüfung und ohne Teilen-Link.",
   "Wirkstoffangaben und Produktversprechen in Kosmetik sind rechtlich geregelt; Texte vom Kunden prüfen lassen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Vier Fragen mit Fortschritt und Zurück, danach ein Produkt mit Begründung aus den eigenen Antworten, zwei Alternativen, Neustart und teilbarem Link.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.25, 1, 0.5, 1) (Toteme --Carousel_Ease, Rezept mode-beauty-kollektion)",
   "dauer_frage_ms": "250 rein, 150 raus",
   "distanz": "Frage 16 px seitlich, Richtung über --richtung (Weiter +1, Zurück -1)",
   "dauer_auswahl_ms": 250,
   "dauer_bild_ms": 1000,
   "fortschritt": "4 Segmente à 2 px, scaleX 0 → 1 in 250 ms; Text „Frage 2 von 4“ in aria-live",
   "uebergang": "document.startViewTransition, view-transition-name: frage; ohne Unterstützung direkter Wechsel",
   "auswertung": "Punktetabelle je Antwort (z. B. „Oft: Brennen“ C4 +3, Retinal -6), höchste Summe gewinnt, Platz 2 und 3 sind Alternativen; Begründung nur aus Antworten mit Punkten für den Sieger oder mit Ausschlusswirkung",
   "url": "?f=2131 (vier Ziffern, 1-basiert, 0 = offen), history.replaceState; vollständiger Code öffnet direkt das Ergebnis",
   "teilen": "navigator.share auf Touch-Geräten, sonst navigator.clipboard.writeText, bei Fehler Link im markierten Textfeld",
   "schrift": "Zalando Sans wdth 125 / 420 für Titel clamp(30px, 3.4vw, 50px), Fragen 22–30 px, Optionen 15,5 px; Fragment Mono 11 px Versal +0.06em",
   "farben": "#f6f3ee Grund, #ebe7e0 Bildfläche, #121010 Text, #cecdc6 Linien, #6b645b Meta (dunkler als #8c857b für Kontrast, 4,6:1 auch auf #ebe7e0)"
  },
  "ausloeser": "klick",
  "touch": "Optionen einspaltig über die volle Breite, „Weiter“ klebt unten im Daumenbereich (sticky mit Verlauf), Teilen über das System-Teilen-Menü. Kein Hover-Zustand.",
  "reduziert": "Fragen wechseln ohne View Transition und ohne Versatz, Fortschritt springt, Produktbild wechselt ohne Überblendung, kein Tipp-Ring in der Vorführung.",
  "korrekturen": {
   "umsetzung": "Ein <form> mit einem <fieldset> je Frage, die Frage als <h2> in der <legend>, Antworten als Radio-Knöpfe in großen Feldern. „Weiter“ erst nach Auswahl aktiv, kein automatisches Weiterspringen (WCAG 3.2.2). Nach dem Wechsel Fokus auf die neue Überschrift (tabindex=\"-1\"). Zurück behält die Antworten. Auswertung über eine Punktetabelle; die Begründung baut sich aus den Antworten („Weil du „Rötungen“ gewählt hast, …“), nicht aus Werbetext. Antworten als Kurzcode in der URL, so lässt sich das Ergebnis teilen und neu laden. Teilen per navigator.share oder Zwischenablage, Rückmeldung in role=\"status\", Ausweichweg mit markiertem Link. Variante Live: alle Fragen als Chips, Ergebnis und Bild wechseln sofort."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept mode-beauty-kollektion (Beauty), erfundene Hautpflege Sameta aus Krefeld, Formel in der Produktzeile wie bei Typology (Wirkstoff + Prozent + Preis). Acht erfundene Produkte als eigene SVG-Flaschen (Pipette, Tiegel, Tube), sichtbar als „Beispielprodukte · erfunden“ markiert. Keine Gesundheitsfragen, weil die Antworten in der URL stehen. Vorführung (Schritte): Antwort, Weiter, Antwort, Zurück (Antwort bleibt), Weiter bis zur Empfehlung mit vier Begründungen und Alternativen; Live: Chips setzen, Anliegen ändern, Empfehlung wechselt. Quellen: typology.com, pulpedevie.com, doofinder.com. AD-Review 02.11.2026: Note 4. Zugang 02.11.2026: --meta #6f685f → #6b645b (auch auf --flaeche 4,6:1), Werte-Zeile in --meta statt --deko; Ergebnis-Bereich aria-label „Deine Empfehlung“ statt aria-labelledby auf einen erst später erzeugten Titel; Kontrastmodus-Rahmen für Knöpfe. Offen (ausgenommen): Pfeil im deaktivierten Weiter-Knopf zählt die Prüfung mit.",
  "varianten": [
   {
    "id": "schritte",
    "name": "Schritt für Schritt",
    "wann": "Beauty, D2C, Kurswahl: wenn jede Frage eine kurze Erklärung braucht und das Ergebnis ein eigener Moment sein soll.",
    "werte": {
     "layout": "eine Frage je Ansicht, Optionen zweispaltig als Felder",
     "uebergang": "View Transition 250 ms, 16 px",
     "ergebnis": "nach der letzten Frage, Fokus auf den Produktnamen"
    }
   },
   {
    "id": "live",
    "name": "Alles auf einer Seite",
    "wann": "Kleines Sortiment oder wiederkehrende Kundschaft: alle Fragen sichtbar, die Empfehlung ändert sich sofort mit jeder Antwort.",
    "werte": {
     "layout": "alle Fragen als Chips (border-radius 999px), Ergebnis darunter, Name groß im Bildfeld",
     "uebergang": "kein Fragenwechsel; Bild 1000 ms Überblendung, Name 250 ms, 8 px",
     "ergebnis": "sobald alle vier beantwortet sind, vorher „Noch n Fragen“"
    }
   }
  ]
 }
}