{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "mengen-stepper",
 "name": "Mengen-Stepper mit Einheit und Summe",
 "name_en": "Quantity stepper with units, limits and live total",
 "kurz": "Mengenwahl mit Minus, Eingabe und Plus: Ziffer rollt in Richtung der Änderung, Einheit mit Plural (Laib, Laibe, kg), sichtbare Grenzen, Rundung auf den Schritt, Gedrückt-Halten und mitlaufende Summe; dazu Tickets mit gemeinsamer Kapazität und Warenkorb mit Papierkorb bei 1.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "freundlich",
  "präzise",
  "taktil"
 ],
 "technik": [
  "css",
  "vanilla-js",
  "form",
  "form-validation",
  "intl",
  "pointer-events"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Mengenwahl mit Minus, Eingabefeld und Plus. Die Ziffer rollt in die Richtung der Änderung, die Einheit passt sich an („1 Laib“, „2 Laibe“, „0,75 kg“). Grenzen sind sichtbar: Am Minimum und Maximum ist der Knopf gesperrt und ein Satz sagt warum, bei Gewicht wird auf den Schritt gerundet und das gemeldet. Gedrückt halten zählt schneller. Darunter läuft die Summe mit. Drei Rollen: Theke (Stück, Laib, kg), Tickets mit gemeinsamer Kapazität und Regeln, kompakt im Warenkorb mit Papierkorb bei 1.",
  "warum_es_wirkt": "Mengen sind der häufigste Klick in Bestellstrecken. Ein Stepper, der Einheit, Grenze und Preis im selben Blick zeigt, erspart Rückfragen („Wie viel ist 0,5?“, „Warum geht nicht mehr?“). Die rollende Ziffer macht die Richtung spürbar, ohne zu verzögern. Im Bestand lösen Vorbestellung, Warenkorb, Kaufbox, Veranstaltung und Buchungsleiste das je selbst; ein gemeinsamer Baustein hält Verhalten und Barrierefreiheit gleich.",
  "wann_einsetzen": "Vorbestellung in Bäckerei und Metzgerei, Hofladen, Shop und Warenkorb, Tickets und Zeitfenster (Erwachsene, Kinder), Personen bei Tisch- und Zimmerbuchung, Gutscheinmengen.",
  "wann_nicht": "Für große oder freie Mengen (über etwa 50) ist ein Zahlfeld mit Auswahlliste besser. Nicht für Werte ohne feste Schritte (Freitext-Betrag). Keine erfundenen Knappheitszahlen: Kapazitäten kommen aus dem System des Betriebs.",
  "varianten": [
   "Theke: Stück, Laib und Gewicht mit Schritt 0,25 kg, Grundpreis je kg, Summe ca.",
   "Tickets: mehrere Stepper teilen sich die freien Plätze eines Zeitfensters, Kinder nur mit Erwachsenen",
   "Kompakt: kleiner Stepper in der Warenkorbzeile, bei Menge 1 wird Minus zum Entfernen mit Rückgängig"
  ],
  "umsetzung": "Je Stepper eine Gruppe (role=group mit aria-labelledby auf den Produktnamen): Knopf „weniger“, ein <input type=text inputmode=decimal role=spinbutton> mit aria-valuemin, aria-valuemax, aria-valuenow und aria-valuetext („2 Laibe“), Knopf „mehr“. Tasten nach WAI-APG: Pfeile ±Schritt, Bild auf und ab ±großer Schritt, Pos1 und Ende. Eingaben mit Komma werden beim Verlassen geparst, auf den Schritt gerundet und begrenzt; die Rundung steht als Hinweis unter dem Feld (aria-describedby). Am Minimum und Maximum aria-disabled am Knopf (bleibt fokussierbar) plus Satz mit Grund. Gedrückt halten: nach 400 ms Wiederholung, Abstand sinkt bis 60 ms. Ziffernwechsel: ein Overlay (aria-hidden) mit alter und neuer Zahl in einer Maske von 1lh, translateY je nach Richtung, das echte Feld ist währenddessen transparent. Einheit über Intl.PluralRules('de-DE') und eine Tabelle (Laib/Laibe, Stück/Stück, Person/Personen), Gewicht mit Intl.NumberFormat('de-DE', {minimumFractionDigits: 2}). Summe mit Intl.NumberFormat als Währung, Live-Ansage gebündelt nach 500 ms Ruhe. Bei Tickets begrenzt die Restkapazität alle Plus-Knöpfe gemeinsam.",
  "mobil": "Knöpfe 44 px, Feld mindestens 3 Zeichen breit, inputmode=decimal öffnet die Zifferntastatur mit Komma. Summe und Weiter in einer festen Leiste unten. Gedrückt halten funktioniert auch per Touch (pointerdown), Kontextmenü und Textauswahl sind auf den Knöpfen aus.",
  "reduzierte_bewegung": "Ziffern wechseln ohne Rollen, Knöpfe federn nicht. Hinweise erscheinen ohne Versatz.",
  "barrierefreiheit": "Spinbutton nach WAI-APG mit aria-valuetext inklusive Einheit. Knöpfe benannt („Roggenmisch: einen Laib weniger“). Gesperrte Knöpfe mit aria-disabled statt disabled, damit der Fokus nicht verloren geht. Grenze und Rundung als Text am Feld, Summe in einer role=status-Zeile mit gebündelter Ansage. Kontrast der Knöpfe 3 : 1 zur Fläche, Text 4,5 : 1."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1) Ziffer und Hinweise; cubic-bezier(0.34, 1.56, 0.64, 1) nur Knopfdruck",
  "dauer_ms": "300 Ziffer, 400 Knopf federt, 150 Farbe, 200 Hinweis schließen",
  "stagger_ms": "",
  "distanz": "Ziffer 1lh nach oben oder unten, Knopf scale .9 → 1",
  "sonstiges": "Gedrückt halten: Start nach 400 ms, dann 160 ms, verkürzt je Schritt um 15 % bis 60 ms. Live-Ansage nach 500 ms Ruhe.",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept lebensmittelhandwerk-theke (token-federnd-verspielt nur auf kleinen Elementen, 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": 300
 },
 "gesehen_bei": [
  {
   "seite": "W3C WAI-ARIA Authoring Practices: Spinbutton Pattern",
   "url": "https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 05.11.2026: role=spinbutton mit aria-valuenow, aria-valuemin, aria-valuemax und aria-valuetext, wenn die Zahl allein unverständlich ist. Pfeil hoch und runter ändern um einen Schritt, Bild auf und ab um einen großen Schritt, Pos1 und Ende setzen Minimum und Maximum. Bei direkter Texteingabe darf JavaScript die normalen Tasten nicht abfangen.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "WAI-ARIA APG: Spinbutton Pattern",
   "url": "https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/"
  },
  {
   "titel": "MDN: Intl.PluralRules",
   "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules"
  },
  {
   "titel": "MDN: inputmode",
   "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode"
  }
 ],
 "kombinierbar_mit": [
  "vorbestellung-abholung",
  "warenkorb-drawer",
  "produkt-kaufbox-varianten",
  "veranstaltung-detailseite",
  "buchungsleiste-datumsbereich",
  "zahlen-odometer",
  "tabellenziffern",
  "druck-feedback"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/mengen-stepper/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/mengen-stepper/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/mengen-stepper/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026"
  ],
  "pruefnotizen": [
   "Recherche Runde 4: vier bestehende Demos (buchungsleiste-datumsbereich, warenkorb-drawer, gutschein-konfigurator, raumkapazitaeten-bestuhlung) brauchen Mengen, je eigene Lösung. Award-Beleg fehlt.",
   "Abgrenzung: vorbestellung-abholung, warenkorb-drawer, produkt-kaufbox-varianten und veranstaltung-detailseite enthalten je einen Stepper als Teil. Dieses Muster ist der gemeinsame Baustein mit Spinbutton-Tasten, Rundung, Einheit, gemeinsamer Kapazität und Gedrückt-Halten.",
   "Grundpreis bei Ware nach Gewicht als Beispiel. Vom Kunden prüfen lassen, keine Rechtsberatung."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Mengenwahl mit Minus, Eingabe und Plus: Ziffer rollt in Richtung der Änderung, Einheit mit Plural (Laib, Laibe, kg), sichtbare Grenzen, Rundung auf den Schritt, Gedrückt-Halten und mitlaufende Summe; dazu Tickets mit gemeinsamer Kapazität und Warenkorb mit Papierkorb bei 1.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) Ziffer und Hinweise (UI token-toggle-asymmetrisch); cubic-bezier(0.34, 1.56, 0.64, 1) nur Knopfdruck (token-federnd-verspielt); schließen cubic-bezier(0.7, 0, 0.84, 0)",
   "dauer_ms": {
    "ziffer": 300,
    "knopf_feder": 400,
    "farbe": 150,
    "zeile_entfernen": 200,
    "hinweis": 300,
    "ansage_ruhe": 500,
    "toast": 5000
   },
   "distanz": "Ziffer translateY ±100 % in einer Maske von 44 px (1lh), alte Zahl blendet aus; Knopf scale .86 → 1; Hinweis translateY −4 px → 0",
   "halten": "erster Schritt sofort, Wiederholung nach 400 ms, Takt 160 ms × 0,85 je Schritt bis 60 ms",
   "stepper": "Pille 44 px (kompakt 34 px), Feld 4.6ch, input type=text inputmode=decimal role=spinbutton mit aria-valuemin/max/now/text; Knöpfe aria-disabled statt disabled",
   "tasten": "Pfeil hoch/runter ±Schritt, Bild auf/ab ±großer Schritt (2, 6 oder 10), Pos1/Ende Minimum/Maximum, Enter übernimmt",
   "gewicht": "Schritt 0,25 kg, max. 3 kg, Anzeige mit zwei Nachkommastellen, Summe ca., Grundpreis je kg in der Zeile",
   "einheit": "Intl.PluralRules('de-DE'): Laib/Laibe, Stück, kg, Person/Personen, Kind/Kinder",
   "summe": "Intl.NumberFormat de-DE EUR, Live-Ansage gebündelt nach 500 ms",
   "typo": "Theke: H1 Shrikhand clamp(2.25rem, 1.3rem + 2.6vw, 3.4rem), Text Onest; Zahl Onest 650 tabular-nums",
   "farben": "Theke: #F7F1E6 Grund, #EBD8BB Zettel, #FBF7EF Pille, #241B14 Text, #665746 leise, #8A3C12 nur Vorbestellen, #B3261E Fehler",
   "vorfuehrung": "Theke: 2 × Laib, 8 × Seele im Haltetakt, 3 × Zwiebelkuchen, Eingabe 1,3 → 1,25 kg mit Hinweis, Laib bis zur Grenze; Schleife"
  },
  "ausloeser": "klick",
  "touch": "Knöpfe 44 px, inputmode=decimal öffnet die Zifferntastatur mit Komma, Gedrückt-Halten per pointerdown ohne Kontextmenü. Unter 640 px steht die Menge unter dem Namen, Summe und Weiter in einer festen Leiste unten. Nach dem Entfernen geht der Fokus auf die Überschrift, damit keine Tastatur aufspringt.",
  "reduziert": "Ziffern wechseln ohne Rollen, Knöpfe federn nicht, Hinweise und Zeilen erscheinen und verschwinden ohne Versatz.",
  "korrekturen": {},
  "geprueft": "04.11.2026",
  "notiz": "Welt: Rezept lebensmittelhandwerk-theke, erfundene Bäckerei Feldkorn in Neuwied (Heddesdorf und Engers): Roggenmisch-Kruste je Laib, Dinkel-Seele und Butterkuchen je Stück, Zwiebelkuchen nach Gewicht. Variante ?v=tickets im Rezept freizeit-erlebnis-ticket: erfundene Boulderhalle Hangwerk (Neuwied), 6 Plätze im Fenster, Kinder unter 12 nur mit Erwachsenen (erst Hinweis, nach Klick auf Weiter Fehler). Variante ?v=kompakt: Abholkorb mit Papierkorb bei Menge 1 und Rückgängig. Eigene Strichzeichnungen statt Fotos. Telefonnummer ist Platzhalter. Abgrenzung: vorbestellung-abholung, warenkorb-drawer, produkt-kaufbox-varianten und veranstaltung-detailseite enthalten je einen eigenen Stepper; dieses Muster ist der gemeinsame Baustein. Gebaut am 05.11.2026 (Runde 4). Selbsturteil 4.",
  "varianten": [
   {
    "id": "theke",
    "name": "Theke",
    "wann": "Bäckerei, Metzgerei, Hofladen, Feinkost: Stück, Laib und Gewicht in einer Vorbestellung, Grundpreis und Circa-Summe.",
    "werte": {
     "einheiten": "Laib (max. 6), Stück (max. 40 und 24), kg (Schritt 0,25, max. 3)",
     "summe": "ca. bei Gewichtsware"
    }
   },
   {
    "id": "tickets",
    "name": "Tickets",
    "wann": "Freizeit, Kultur, Führungen, Kurse: mehrere Preisgruppen teilen sich die freien Plätze eines Zeitfensters.",
    "werte": {
     "kapazitaet": "6 Plätze, Plätze als Reihe von Kästchen",
     "regel": "Kinder unter 12 nur mit Erwachsenen",
     "farben": "#F4F3EF Grund, #E6E3DA Fläche, #AE1650 Handlung",
     "typo": "H1 Anybody 850 wdth 72, Text TikTok Sans"
    }
   },
   {
    "id": "kompakt",
    "name": "Kompakt",
    "wann": "Warenkorb, Mini-Korb, Bestellübersicht: kleiner Stepper in der Zeile, Entfernen ohne extra Knopf.",
    "werte": {
     "stepper": "34 px",
     "minimum": "1, darunter Papierkorb",
     "entfernen": "Zeile klappt in 200 ms zu, Rückgängig 5000 ms"
    }
   }
  ]
 }
}