{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "gutschein-konfigurator",
 "name": "Gutschein-Konfigurator",
 "name_en": "Gift voucher configurator with live card preview",
 "kurz": "Gutschein in drei Schritten: Betrag oder Erlebnis wählen, Karte mit Motiv und persönlichem Satz live gestalten, Zustellung festlegen, dann per URL zum Zahlungsdienst; darunter die Code-Prüfung mit Restwert.",
 "kategorie": "Sektionen & Funktionen",
 "kategorie_slug": "sektionen",
 "kategorie_nr": 16,
 "bau_chat": "D",
 "prioritaet": "D",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "luxuriös",
  "warm"
 ],
 "stimmung_roh": [
  "warm",
  "persönlich",
  "hochwertig"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "form",
  "intl",
  "svg",
  "dialog"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Wert- oder Leistungsgutschein in drei Schritten. Erstens Betrag oder Leistung („Eine Nacht für zwei“, „Menü für zwei“, „Haarschnitt und Pflege“). Zweitens Motiv, Namen und ein persönlicher Satz, während daneben die Karte live mitwächst. Drittens die Zustellung: PDF sofort per E-Mail oder als Karte per Post. Bezahlt wird beim Shop oder Zahlungsdienst des Betriebs, die Auswahl geht per URL dorthin. Gültigkeit und Einlösebedingungen stehen als markierte Platzhalter da, die der Betrieb ausfüllt. Unter dem Formular prüft „Gutschein-Code prüfen“ Restwert und Gültigkeit.",
  "warum_es_wirkt": "Ein Gutschein ist ein Geschenk, also kauft man ihn mit dem Blick auf die Karte, die ankommt. Die Live-Vorschau macht aus einem Formular ein Geschenk und beantwortet die Frage „Wie sieht das aus?“ vor dem Bezahlen. Drei kurze Schritte mit sichtbarer Summe halten die Strecke überschaubar, und die Code-Prüfung spart dem Betrieb Anrufe.",
  "wann_einsetzen": "Gastronomie, Hotel, Friseur und Kosmetik, Fitness, Kultur, Fotografie, Manufakturen und Fahrschulen, also überall, wo Erlebnisse oder Leistungen verschenkt werden. Besonders vor Weihnachten, Muttertag und Valentinstag.",
  "wann_nicht": "Wenn der Betrieb keinen Zahlungsdienst und keine Codeverwaltung hat; dann reicht „Gutschein telefonisch bestellen“ mit Bild. Nicht als Ersatz für einen Shop mit vielen Artikeln (dafür warenkorb-drawer). Keine Gültigkeit oder Einlöseregel erfinden: die Angaben kommen vom Betrieb und werden vom Kunden geprüft.",
  "varianten": [
   "Wertgutschein: feste Beträge plus freier Betrag mit Grenzen",
   "Leistungsgutschein: Leistungen mit Preis als Karten (Übernachtung, Menü, Behandlung, Probestunde)",
   "Zustellung als PDF sofort, per Post als Karte oder zur Abholung vor Ort",
   "Einlöse-Prüfung mit Restwert für Wertgutscheine"
  ],
  "umsetzung": "Ein <form> mit drei <fieldset>-Schritten und einer Schrittanzeige als <ol> mit aria-current=\"step\". Schritt 1 als Radiogruppe (Art) und Radiokarten (Betrag oder Leistung), freier Betrag als <input type=number> mit min, max und step und Fehlermeldung erst nach dem Verlassen. Schritt 2 mit Motiv-Radios, Namen und <textarea maxlength> samt Zeichenzähler; jede Eingabe (input-Ereignis) schreibt in die Vorschau-Karte daneben, Texte nur über textContent. Schritt 3 mit Zustellung (PDF, Post, Abholung) und den dazu nötigen Feldern. Die Summe steht dauerhaft in einer Zeile mit Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}). „Weiter zur Bezahlung“ baut eine URL mit URLSearchParams (art, wert oder leistung, motiv, zustellung, Texte) und leitet zum Shop oder Zahlungsdienst des Betriebs; den Code erzeugt erst der Server nach der Zahlung. Die PDF-Vorschau ist dieselbe Karte in einem <dialog> plus @media print mit @page und window.print(), ganz ohne Bibliothek. Die Code-Prüfung fragt einen Server-Endpunkt (mit Ratenbegrenzung) und zeigt Restwert, Gültigkeit oder einen klaren Fehler; Codes nie im Browser vorhalten. Gültigkeit, Einlösung, Versandkosten und Widerrufshinweis sind Platzhalter des Betriebs und vom Kunden prüfen lassen.",
  "mobil": "Einspaltig: oben eine kleine, mitlaufende Vorschau der Karte, darunter der aktuelle Schritt. Summe und „Weiter“ in einer festen Leiste unten. Betragskarten im Zweierraster, große Trefferflächen, Tastatur passend zum Feld (inputmode=numeric, type=email).",
  "reduzierte_bewegung": "Schritte und Motive wechseln ohne Gleiten und Überblenden. Die Vorschau aktualisiert sich sofort.",
  "barrierefreiheit": "Jeder Schritt ist ein fieldset mit legend, die Schrittanzeige nennt „Schritt 2 von 3“. Nach „Weiter“ geht der Fokus auf die Überschrift des neuen Schritts. Fehler stehen am Feld (aria-describedby, aria-invalid) und werden beim Absenden gesammelt angesagt. Die Vorschau-Karte ist ein Bild mit Textalternative, die Namen, Betrag und Satz wiederholt; Live-Ansage nur für die Summe. Ergebnis der Code-Prüfung in einer role=\"status\"-Zeile. Kontrast mindestens 4,5 : 1 auch auf den Motiven."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
  "dauer_ms": "150 bis 250 UI, 300 Schritt öffnen, 200 Schritt schließen, 600 Motivwechsel der Karte",
  "stagger_ms": "",
  "distanz": "Schrittwechsel 12 px",
  "sonstiges": "Asymmetrisch nach token-toggle-asymmetrisch: öffnen cubic-bezier(0.16, 1, 0.3, 1), schließen cubic-bezier(0.7, 0, 0.84, 0); Motivwechsel mit cubic-bezier(0.37, 0, 0.63, 1) aus token-luxus-weich",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept boutique-hotel-gastgeber"
 },
 "kurve": {
  "bezier": [
   0.4,
   0.0,
   0.2,
   1.0
  ],
  "css": "cubic-bezier(0.4, 0, 0.2, 1)",
  "name": "Material Standard",
  "dauer_ms": 150
 },
 "gesehen_bei": [
  {
   "seite": "ROSSMANN: Geschenkgutscheine",
   "url": "https://www.rossmann.de/de/service-und-hilfe/geschenkgutscheine",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 02.11.2026: Betrag von 5 bis 100 €, Motiv passend zum Anlass, persönliche Nachricht optional, nach der Zahlung sofort als PDF zum Ausdrucken oder Weiterleiten. Drei Jahre gültig ab Kauf, keine Barauszahlung. Wie man Guthaben prüft, steht dort nicht.",
   "art": "website"
  },
  {
   "seite": "kurzurlaub.de: Wertgutschein",
   "url": "https://www.kurzurlaub.de/wertgutschein.html?shop=1",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 02.11.2026: Verpackung wählen (Box, Klappkarte, E-Mail zum Selbstdrucken), Motiv aus einer Reihe (Geburtstag, Wellness, Auszeit …), Wert von 20 bis 1.000 € mit festen Stufen, danach Bestelldaten und Zusammenfassung. Keine Live-Vorschau der Karte und kein Feld für einen persönlichen Text.",
   "art": "website"
  },
  {
   "seite": "e-guma: Gutscheine konfigurieren und gestalten",
   "url": "https://www.e-guma.ch/en/?p=8309",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 02.11.2026 (Stand 29.04.2026): Gutscheinsystem für Hotellerie und Gastronomie mit Wertgutschein und Leistungsgutschein, einseitigem A4-Layout für print@home und aufwendigerem Layout für Postversand und Abholung. Gültigkeit, Saisonpreise und Einlösehinweise legt der Betrieb fest.",
   "art": "website"
  },
  {
   "seite": "Verbraucherzentrale Niedersachsen: Wunschgutschein",
   "url": "https://www.verbraucherzentrale-niedersachsen.de/node/121199",
   "auszeichnung": "",
   "beobachtung": "Artikel vom 18.12.2023: Für gekaufte Gutscheine gilt die allgemeine Verjährungsfrist von drei Jahren, wenn nichts anderes vereinbart ist. Grundlage für den Platzhalter „Gültigkeit“, der vom Kunden geprüft werden muss.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: URLSearchParams",
   "url": "https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams"
  },
  {
   "titel": "MDN: @page",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@page"
  },
  {
   "titel": "MDN: <dialog>",
   "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog"
  }
 ],
 "kombinierbar_mit": [
  "validierung-nach-interaktion",
  "checkbox-radio-animiert",
  "kopieren-feedback",
  "dialog-modal-nativ",
  "warenkorb-drawer",
  "formular-fehlerzusammenfassung",
  "buchungsleiste-datumsbereich"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/",
  "meta": "https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Lücken-Recherche 02.11.2026 (N7)"
  ],
  "pruefnotizen": [
   "Lücken-Recherche 02.11.2026 (N7): Das Gastro-Rezept baut Gutscheine aus fremden Mustern zusammen; „Gutschein“ kommt im Bestand nur als Nebenbeispiel vor. Eine externe Zahl zur Nachfrage gibt es nicht.",
   "Drei Gutschein-Strecken geprüft (rossmann.de, kurzurlaub.de, e-guma.ch, 02.11.2026). Keine davon zeigt eine Live-Vorschau mit persönlichem Satz; dieser Teil ist eigene Festlegung.",
   "Gültigkeit, Einlösung und Versandkosten sind in der Demo Platzhalter. Rechtliches (Verjährung, Widerruf, Preisangaben) vom Kunden prüfen lassen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Gutschein in drei Schritten: Betrag oder Erlebnis wählen, Karte mit Motiv und persönlichem Satz live gestalten, Zustellung festlegen, dann per URL zum Zahlungsdienst; darunter die Code-Prüfung mit Restwert.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing_ui": "cubic-bezier(0.4, 0, 0.2, 1), 180 ms (Karten, Felder, Radios)",
   "schritt_oeffnen": "opacity 0 → 1, translate 12 px → 0, 300 ms cubic-bezier(0.16, 1, 0.3, 1)",
   "schritt_schliessen": "opacity → 0, translate → -8 px, 200 ms cubic-bezier(0.7, 0, 0.84, 0), danach öffnet der neue Schritt",
   "motivwechsel": "Überblendung 600 ms cubic-bezier(0.37, 0, 0.63, 1)",
   "post": "Karte rotate -2.2deg und translate -3 % / -4 %, Umschlag opacity 0 → 1 und rotate 4deg, je 300 ms Ausklang",
   "schrittanzeige": "Strich scaleX 0 → 1 in 300 ms, aria-current=\"step\"",
   "karte": "Seitenverhältnis 1.414 (A6 quer), Motivfläche 42 %, Schriftgrößen in cqi",
   "felder": "eigener Betrag 25 bis 1.000 € in 5-€-Schritten, Namen höchstens 32 Zeichen, Satz höchstens 140 Zeichen mit Zähler",
   "versand": "Post + 3,50 € (Beispielwert)",
   "wartezeiten": "Übergabe 450 ms, Code-Prüfung 650 ms (simuliert)",
   "code": "ANN-XXXX-XXXX ohne 0, O, 1, I; Eingabe wird beim Verlassen normalisiert",
   "pdf": "A4 210 : 297 im dialog, Karte oben, Faltlinie, Einlösehinweis; @page size A4 margin 0"
  },
  "ausloeser": "klick",
  "touch": "Einspaltig: Einleitung, darunter die Karte, dann der Schritt. Eine feste Leiste unten zeigt die Summe und den nächsten Schritt (Weiter, Zur Bezahlung, Zahlung simulieren). Betragskarten und Motive im Zweierraster, Tastatur passend zum Feld (inputmode numeric und email).",
  "reduziert": "Schritte, Motive, Umschlag und Ergebnisse wechseln ohne Gleiten und Überblenden; simulierte Wartezeiten entfallen.",
  "korrekturen": {},
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept boutique-hotel-gastgeber, erfundenes Haus Annengrund (Hotel und Gasthaus) aus Eisenach. Newsreader für Überschriften und die Karte, Mona Sans breit und versal für Labels, Sand, Creme und Hauston Holz. Wert- und Leistungsgutschein als Umschalter im Formular, nicht als Demo-Variante. Vier eigene SVG-Motive (Waldweg im Nebel, Burg bei Nacht, Kaminzimmer, Frühstück am Fenster). Ablauf vollständig: Fehler am Feld erst nach dem Verlassen, Fokus auf die Überschrift des neuen Schritts, Übergabe-URL mit URLSearchParams sichtbar, simulierte Zahlung mit neuem Code, PDF-Vorschau im dialog mit print-CSS, Code-Prüfung mit gültig, eingelöst, unbekannt und unvollständig. Gültigkeit und Einlösung als gestrichelt markierte Platzhalter. Referenzen: rossmann.de (Motiv, Nachricht, PDF sofort), kurzurlaub.de (Verpackung, Motivreihe, Wertstufen), e-guma.ch (print@home-Layout gegenüber Postversand). AD-Review 02.11.2026: Note 4. Alle Zustände geprüft (eigener Betrag falsch, Mail leer, Post-Felder, Übergabe-URL, Zahlung, PDF-Dialog mit Esc, Code leer, unvollständig, unbekannt, eingelöst, neu)."
 }
}