{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "passwort-staerke",
 "name": "Passwortstärke-Visualisierung",
 "name_en": "Password strength feedback",
 "kurz": "Passwort festlegen im Mandantenportal einer Kanzlei: Leiste, Segmente oder eine Zeichnung zeigen die Stärke, die Regeln haken sich einzeln ab, am Ende eine ruhige Bestätigung.",
 "kategorie": "Mikroanimationen",
 "kategorie_slug": "mikroanimationen",
 "kategorie_nr": 9,
 "bau_chat": "C4",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "präzise",
  "verspielt"
 ],
 "stimmung_roh": [
  "funktional",
  "freundlich"
 ],
 "technik": [
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Während der Eingabe zeigt eine Leiste, eine Segmentreihe oder ein Bild die Stärke. Länge und Farbe wachsen mit. Die Regeln wie Länge, Ziffer oder Sonderzeichen haken sich einzeln ab. Sind alle erfüllt, folgt eine dezente Bestätigung.",
  "warum_es_wirkt": "Anforderungen werden spielerisch erfüllbar. Das senkt den Frust bei Registrierungen.",
  "wann_einsetzen": "Registrierungen, Einladungen in ein Kundenportal, Dialoge zum Ändern des Passworts.",
  "wann_nicht": "Beim Login. Dort braucht es keine Stärkeanzeige.",
  "varianten": [
   "Durchgehende Leiste mit Farbübergang",
   "Segmentleiste mit vier Stufen",
   "Regelliste per :has(:user-invalid) (Chrome)",
   "Bild wird mit steigender Stärke schärfer (Codrops PasswordStrengthVisualization, nach Colibro)"
  ],
  "umsetzung": "Einen Score von 0 bis 4 berechnen, etwa mit zxcvbn oder aus Länge und Zeichenvorrat, und als --s setzen. Leiste: transform: scaleX(calc(var(--s) / 4)) mit einer Transition von 200 bis 300 ms, Farbe per color-mix zwischen Rot und Grün. Regeln als li[data-ok] mit einem Häkchen, das per scale einblendet. Die Stärke als Text danebenschreiben.",
  "mobil": "Identisch.",
  "reduzierte_bewegung": "Ohne Transition.",
  "barrierefreiheit": "Die Stärke zusätzlich als Text zeigen (schwach, stark) und gebündelt per aria-live=\"polite\" ansagen. Nie nur Farbe. Regeln mit erfüllt oder nicht erfüllt für Screenreader auszeichnen und über aria-describedby mit dem Feld verbinden."
 },
 "messwerte": {
  "easing": "ease-out",
  "dauer_ms": "200–300",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "",
  "herkunft": "typisch",
  "quelle": ""
 },
 "kurve": {
  "bezier": [
   0,
   0,
   0.58,
   1
  ],
  "css": "cubic-bezier(0, 0, 0.58, 1)",
  "name": "ease-out",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Codrops PasswordStrengthVisualization (Repo)",
   "url": "https://github.com/codrops/PasswordStrengthVisualization",
   "auszeichnung": "",
   "beobachtung": "Bild-basierte Stärkevisualisierung nach dem Colibro-Signup (2018).",
   "art": "demo"
  },
  {
   "seite": "Chrome Developers: Validate input after interaction",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/forms/validate-input-after-interaction",
   "auszeichnung": "",
   "beobachtung": "Passwortregeln mit pattern und :has()-Hervorhebung; Regeln sichtbar lassen.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Chrome: Validate input after interaction",
   "url": "https://developer.chrome.com/docs/modern-web-guidance/guides/forms/validate-input-after-interaction"
  }
 ],
 "kombinierbar_mit": [
  "validierung-nach-interaktion",
  "checkbox-radio-animiert"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/mikroanimationen/passwort-staerke/",
  "meta": "https://cecodesign.de/lab/fundus/mikroanimationen/passwort-staerke/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/mikroanimationen/passwort-staerke/demo"
 },
 "herkunft": {
  "quelldateien": [
   "hover.json"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Passwort festlegen im Mandantenportal einer Kanzlei: Leiste, Segmente oder eine Zeichnung zeigen die Stärke, die Regeln haken sich einzeln ab, am Ende eine ruhige Bestätigung.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "kurve": "cubic-bezier(0.4, 0, 0.22, 1) für alles (Rezept kanzlei-beratung-souveraen, Oppenhoff); Muster nennt ease-out 200–300 ms",
   "dauer_ms": "250 für Leiste, Segmente, Häkchen, Bestätigung, Unschärfe; 125 für Farben, Rahmen, Hover",
   "score": "0–4 aus Länge × log2(Zeichenvorrat) (26 klein, 26 groß, 10 Ziffern, 33 Zeichen): unter 30 bit 0, unter 50 bit 1, unter 70 bit 2, unter 90 bit 3, sonst 4; gängiges Wort halbiert die Bits, dreifache Wiederholung und Folgen wie 1234 je −10 bit; ohne alle Regeln höchstens 3",
   "stufen": "Sehr schwach, Schwach, Mittel, Gut, Stark; leeres Feld: Noch kein Passwort",
   "leiste": "4 px hoch, transform scaleX(var(--s) / 4), Sehr schwach als Rest mit --s 0.4",
   "segmente": "4 Segmente, 4 px Abstand, je scaleX 0 → 1 von links",
   "bild": "Strichzeichnung der Kanzlei: filter blur(calc((4 − s) × 3.5px)), Deckkraft 0.35 + s × 0.1625",
   "farbe": "color-mix(in oklab, #c8423f, #2f7d55 calc(var(--s) × 25%)); Urteilstext dieselbe Farbe, 22 % dunkler",
   "regeln": "Mindestens 12 Zeichen, Groß- und Kleinbuchstaben, eine Ziffer, ein Sonderzeichen, kein gängiges Wort; li[data-ok], Kreis 18 px füllt sich in #1e1e50, Häkchen scale 0 → 1",
   "bestaetigung": "bei Score 4 und allen Regeln: Zeile opacity 0 → 1, translateY 4 → 0 px, 250 ms; Rahmen des Felds #2f7d55; Platz ist reserviert, nichts springt",
   "ansage": "aria-live polite, 600 ms gebündelt: „Passwortstärke: Gut“",
   "vorfuehrung": "Tippen 85 ms pro Zeichen (Endung 95 ms), Pausen 450 und 900 ms, Löschen 22 ms pro Zeichen, Gegenprobe Frankfurt2026 mit 75 ms",
   "reduziert": "alle Transitionen aus, Zustände springen"
  },
  "ausloeser": "klick",
  "touch": "Identisch. Der Knopf Anzeigen ist auf Touch 40 px hoch, die Regeln stehen einspaltig.",
  "reduziert": "Ohne Transition: Leiste, Segmente, Häkchen, Bestätigung und Schärfe der Zeichnung springen direkt in den neuen Zustand. Der Stärketext bleibt.",
  "korrekturen": {
   "beschreibung": "Während der Eingabe zeigt eine Leiste, eine Segmentreihe oder ein Bild die Stärke. Länge und Farbe wachsen mit. Die Regeln wie Länge, Ziffer oder Sonderzeichen haken sich einzeln ab. Sind alle erfüllt, folgt eine dezente Bestätigung.",
   "warum_es_wirkt": "Anforderungen werden spielerisch erfüllbar. Das senkt den Frust bei Registrierungen.",
   "wann_einsetzen": "Registrierungen, Einladungen in ein Kundenportal, Dialoge zum Ändern des Passworts.",
   "wann_nicht": "Beim Login. Dort braucht es keine Stärkeanzeige.",
   "varianten": [
    "Durchgehende Leiste mit Farbübergang",
    "Segmentleiste mit vier Stufen",
    "Regelliste per :has(:user-invalid) (Chrome)",
    "Bild wird mit steigender Stärke schärfer (Codrops PasswordStrengthVisualization, nach Colibro)"
   ],
   "umsetzung": "Einen Score von 0 bis 4 berechnen, etwa mit zxcvbn oder aus Länge und Zeichenvorrat, und als --s setzen. Leiste: transform: scaleX(calc(var(--s) / 4)) mit einer Transition von 200 bis 300 ms, Farbe per color-mix zwischen Rot und Grün. Regeln als li[data-ok] mit einem Häkchen, das per scale einblendet. Die Stärke als Text danebenschreiben.",
   "mobil": "Identisch.",
   "reduzierte_bewegung": "Ohne Transition.",
   "barrierefreiheit": "Die Stärke zusätzlich als Text zeigen (schwach, stark) und gebündelt per aria-live=\"polite\" ansagen. Nie nur Farbe. Regeln mit erfüllt oder nicht erfüllt für Screenreader auszeichnen und über aria-describedby mit dem Feld verbinden."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt: Rezept kanzlei-beratung-souveraen, erfundene Kanzlei Vahrenholt Liebrecht (Rechtsanwälte, Steuerberater) aus Frankfurt am Main, Mandantenportal-Einladung. Newsreader für Überschriften, Schibsted Grotesk für alles Funktionale, Nachtblau #1e1e50 auf warmen Grautönen, Cyan nur für Fokus. Kurve aus dem Rezept (0.4, 0, 0.22, 1) mit 250 ms aus dem Muster. Drei Varianten per Umschalter: Leiste, Segmente, eine Strichzeichnung der Kanzleivilla, die mit der Stärke scharf wird. Eigener Score ohne Bibliothek, mit Abzug für gängige Wörter. Vorführung tippt Mainufer-Kaffee-um-7! in Etappen und prüft dann Frankfurt2026 gegen. Referenzen: clerk.com, oppenhoff.eu. AD-Review 01.11.2026: Note 4 Zugang 02.11.2026: Formularfelder mit grid-template-columns minmax(0, 1fr) (kein Querscrollen bei 320 px), Knopfrahmen im Kontrastmodus."
 }
}