{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "fokus-stil-system",
 "name": "Fokus-Stil als Gestaltungssystem",
 "name_en": "Designed focus-visible system (shapes, offset, brand colour)",
 "kurz": "Tastaturfokus als Teil der Gestaltung: :focus-visible mit outline in der Markenfarbe, eigener Form für Link, Knopf, Feld und Karte, kurzem Übergang und mindestens 3:1 Kontrast, wahlweise als Doppelring oder gelbe Signalfläche.",
 "kategorie": "Zugang & Robustheit",
 "kategorie_slug": "zugang",
 "kategorie_nr": 17,
 "bau_chat": "E",
 "prioritaet": "E",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "präzise",
  "ruhig",
  "rücksichtsvoll"
 ],
 "technik": [
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "1) Der Tastaturfokus wird gestaltet statt entfernt: :focus-visible mit outline in der Markenfarbe, Versatz per outline-offset und einem kurzen Übergang beim Erscheinen. 2) Jede Art von Element bekommt eine eigene, wiedererkennbare Form: Textlinks einen engen Ring mit kräftiger Unterstreichung, Knöpfe einen Ring mit Abstand, Felder einen Rand, der zur Linie wird, Karten einen weiten Ring mit Fläche. 3) Auf dunklen Flächen und Bildern schaltet der Ring auf eine helle Variante oder einen Doppelring um. 4) Grundlage bleibt outline, damit der Fokus auch im Kontrastmodus sichtbar ist.",
  "warum_es_wirkt": "Wer mit Tastatur, Schaltern oder Sprachsteuerung arbeitet, sieht nur über den Fokus, wo er ist. Ein gestalteter Fokus wirkt wie ein Teil der Marke, nicht wie ein Browser-Rest, und Designer lassen ihn darum stehen. Unterschiedliche Formen verraten schon vor dem Lesen, ob gleich ein Link folgt, ein Knopf oder ein Feld.",
  "wann_einsetzen": "Auf jeder Seite. Besonders dort, wo die Standard-Fokusringe stören würden und deshalb oft entfernt werden: ruhige Portfolios, Marken mit eigener Farbe, Seiten mit Bildern und dunklen Flächen, Formulare.",
  "wann_nicht": "Nie ganz weglassen. Nicht nur über box-shadow oder Hintergrundfarbe lösen (verschwindet im Kontrastmodus). Keine Fokusringe, die nur bei Hover erscheinen oder nach kurzer Zeit ausblenden. Kein reines Farb-Signal ohne Formänderung, wenn die Farbe nah an Text oder Rand liegt.",
  "varianten": [
   "Ring in Markenfarbe: outline 2 px, Versatz je nach Element 0 bis 6 px",
   "Doppelring hell/dunkel für Bilder, Farbflächen und Dark Mode (outline plus box-shadow)",
   "Signalfläche wie bei GOV.UK: gelbe Fläche mit schwarzer Unterkante für Links, gelber Rand mit schwarzer Linie für Felder",
   "Unterstreichung, die beim Fokus dicker und farbig wird (zusätzlich zum Ring)"
  ],
  "umsetzung": "Grundzustand für alle bedienbaren Elemente: outline: 0 solid var(--fokus); outline-offset: 0; transition: outline-width 80ms, outline-offset 80ms (Verschwinden schneller als Erscheinen). Fokus: :focus-visible { outline-width: 2px; outline-offset: var(--o); transition-duration: 160ms }. --o je Art: Textlink 2px (dazu text-decoration-thickness 2px in Markenfarbe), Knopf 3px (Ring folgt dem border-radius), Feld 0 (dazu border-color in Markenfarbe), Karte 6px (dazu Hintergrundfläche). Auf dunklen Flächen eine helle Fokusfarbe per Variable. Doppelring: outline 2px Markenfarbe plus box-shadow 0 0 0 var(--o) Grundfarbe, 0 0 0 calc(var(--o) + 4px) Textfarbe. Signalfläche: gelbe Fläche mit schwarzer Unterkante, outline 3px transparent nur für den Kontrastmodus. Kontrastmodus: @media (forced-colors: active) { :focus-visible { outline-color: Highlight } }. Im Grundzustand outline-width 0 statt transparenter outline, sonst zeigt der Kontrastmodus überall Rahmen. scroll-padding für feste Kopfleisten. Sprunglink als erster Tab-Halt. Vorführungen in iframes nur simulieren (Attribut statt focus()), sonst springt der Fokus der Hauptseite.",
  "mobil": "Auf Touch erscheint :focus-visible kaum, außer mit externer Tastatur oder Schaltersteuerung; dann gilt dasselbe System. Trefferflächen bleiben mindestens 44 px hoch.",
  "reduzierte_bewegung": "Übergang entfällt, der Ring steht sofort. Form und Farbe bleiben gleich.",
  "barrierefreiheit": "WCAG 2.4.7 Focus Visible (AA in WCAG 2.2): jedes bedienbare Element zeigt den Tastaturfokus. 2.4.11 Focus Not Obscured (Minimum, AA): nichts Eigenes (feste Kopfleiste, Cookie-Banner, Pult) verdeckt das fokussierte Element ganz; scroll-padding hilft. 2.4.13 Focus Appearance (AAA, als Ziel): Fläche mindestens wie ein 2 px dicker Umriss und 3:1 zwischen fokussiertem und unfokussiertem Zustand. 1.4.11 Non-text Contrast (AA): Ring mindestens 3:1 zu den angrenzenden Farben, hier 5,4:1 auf hellem und 8,3:1 auf dunklem Grund. 2.4.3 Focus Order: Reihenfolge folgt dem Lesefluss, ein Sprunglink steht zuerst. Kontrastmodus: outline bleibt sichtbar, box-shadow und Hintergrund nicht."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.165, 0.84, 0.44, 1) (easeOutQuart, Rezept freelancer-stille-visitenkarte)",
  "dauer_ms": "Erscheinen 160, Verschwinden 80",
  "stagger_ms": "",
  "distanz": "outline 2 px; Versatz Link 2 px, Knopf 3 px, Feld 0 px, Karte 6 px",
  "sonstiges": "Kontrast Ring zu Grund mindestens 3:1 (WCAG 1.4.11, 2.4.13); Signalfarben #ffdd00/#0b0b09 nach GOV.UK-Prinzip, Hexwerte eigene Festlegung",
  "herkunft": "eigene Festlegung",
  "quelle": "https://sarasoueidan.com/blog/focus-indicators/"
 },
 "kurve": {
  "bezier": [
   0.165,
   0.84,
   0.44,
   1.0
  ],
  "css": "cubic-bezier(0.165, 0.84, 0.44, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 160
 },
 "gesehen_bei": [
  {
   "seite": "GOV.UK Design System: Understanding focus states",
   "url": "https://design-system.service.gov.uk/get-started/focus-states",
   "auszeichnung": "",
   "beobachtung": "Fokus in Gelb und Schwarz: Links bekommen eine gelbe Fläche mit dicker schwarzer Unterkante, Felder einen gelben Rand und einen dicken schwarzen Rahmen (vorhandener Rahmen wird dicker). Begründung: soll auf allen Hintergründen von GOV.UK WCAG 1.4.11 erfüllen; Gelb wirkt auf dunklem, Schwarz auf hellem Grund.",
   "art": "website"
  },
  {
   "seite": "Sara Soueidan: A guide to designing accessible, WCAG-conformant focus indicators",
   "url": "https://sarasoueidan.com/blog/focus-indicators/",
   "auszeichnung": "",
   "beobachtung": "Fläche mindestens wie ein 2 px dicker Umriss, 3:1 zwischen fokussiertem und unfokussiertem Zustand (2.4.13), outline-offset für Luft, Doppelring outline 3px plus box-shadow 0 0 0 6px in der Gegenfarbe, outline statt box-shadow wegen Kontrastmodus, gestrichelte 2-px-Ringe reichen nicht.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Sara Soueidan: A guide to designing accessible, WCAG-conformant focus indicators",
   "url": "https://sarasoueidan.com/blog/focus-indicators/"
  },
  {
   "titel": "GOV.UK Design System: Understanding focus states",
   "url": "https://design-system.service.gov.uk/get-started/focus-states"
  }
 ],
 "kombinierbar_mit": [
  "button-zustaende",
  "unterstreichung-varianten",
  "validierung-nach-interaktion",
  "kopieren-feedback",
  "token-tech-praezise",
  "theme-umschalter-view-transition"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/",
  "meta": "https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "Recherche E: sichtbarer Fokus als Gestaltungselement war bisher nur Nebensatz in anderen Mustern.",
   "GOV.UK-Seite und Soueidan-Artikel am 01.11.2026 per WebFetch gelesen; GOV.UK nennt dort keine Hexwerte und Dicken.",
   "In WCAG 2.2 ist 2.4.11 Focus Not Obscured (Minimum, AA) und 2.4.13 Focus Appearance (AAA); Auftrag nannte 2.4.11/2.4.13, beide hier korrekt zugeordnet."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Tastaturfokus als Teil der Gestaltung: :focus-visible mit outline in der Markenfarbe, eigener Form für Link, Knopf, Feld und Karte, kurzem Übergang und mindestens 3:1 Kontrast, wahlweise als Doppelring oder gelbe Signalfläche.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.165, 0.84, 0.44, 1) (easeOutQuart, Rezept freelancer-stille-visitenkarte)",
   "dauer_ms": "Erscheinen 160 · Verschwinden 80 (outline-width, outline-offset, box-shadow, Fläche, Randfarbe)",
   "grundzustand": ".f { outline: 0 solid var(--fokus); outline-offset: 0 } – Breite 0 statt transparent, damit der Kontrastmodus keine Dauerrahmen malt",
   "fokus": ".f:focus-visible { outline-width: 2px; outline-offset: var(--o) }",
   "formen": "Link --o 2px, Radius 3px, Unterstrich 2px in Markenfarbe · Knopf --o 3px, Ring folgt der Pille (border-radius 999px) · Feld --o 0, Rand wird Markenfarbe (zusammen 3px Linie) · Karte --o 6px, Radius 10px, Fläche #f0f0f0",
   "farben": "--fokus #2f5bea (5,4:1 auf #fcfcfc) · auf dunklen Flächen --fokus #8aa4ff (8,3:1 auf #0b0b09)",
   "kontrastmodus": "@media (forced-colors: active) { :focus-visible { outline-color: Highlight; outline-width: 3px } }",
   "scroll": "scroll-padding-block: 96px gegen verdeckten Fokus (2.4.11)",
   "sprunglink": "„Zum Inhalt springen“ als erster Tab-Halt, top −64px → 12px beim Fokus",
   "vorfuehrung": "simuliert Tab im 1100-ms-Takt über das Attribut data-fokus-sim (gleiche Regeln wie :focus-visible), ohne echten Fokus und ohne scrollIntoView, damit die Galerie weder Fokus noch Scroll verliert"
  },
  "ausloeser": "klick",
  "touch": "Auf Touch ohne Tastatur erscheint :focus-visible nicht, die Seite sieht aus wie gewohnt. Mit externer Tastatur oder Schaltersteuerung gilt dasselbe System. Unter 880 px rutscht die Legende unter die Spalte; Trefferflächen 44 px.",
  "reduziert": "Alle Übergänge des Fokus-Systems entfallen (transition: none): Ring, Fläche und Sprunglink stehen sofort. Formen, Farben und Kontraste bleiben gleich.",
  "korrekturen": {
   "umsetzung": "Grundzustand für alle bedienbaren Elemente: outline: 0 solid var(--fokus); outline-offset: 0; transition: outline-width 80ms, outline-offset 80ms (Verschwinden schneller als Erscheinen). Fokus: :focus-visible { outline-width: 2px; outline-offset: var(--o); transition-duration: 160ms }. --o je Art: Textlink 2px (dazu text-decoration-thickness 2px in Markenfarbe), Knopf 3px (Ring folgt dem border-radius), Feld 0 (dazu border-color in Markenfarbe), Karte 6px (dazu Hintergrundfläche). Auf dunklen Flächen eine helle Fokusfarbe per Variable. Doppelring: outline 2px Markenfarbe plus box-shadow 0 0 0 var(--o) Grundfarbe, 0 0 0 calc(var(--o) + 4px) Textfarbe. Signalfläche: gelbe Fläche mit schwarzer Unterkante, outline 3px transparent nur für den Kontrastmodus. Kontrastmodus: @media (forced-colors: active) { :focus-visible { outline-color: Highlight } }. Im Grundzustand outline-width 0 statt transparenter outline, sonst zeigt der Kontrastmodus überall Rahmen. scroll-padding für feste Kopfleisten. Sprunglink als erster Tab-Halt. Vorführungen in iframes nur simulieren (Attribut statt focus()), sonst springt der Fokus der Hauptseite."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept freelancer-stille-visitenkarte, erfundene Interaction-Designerin „Fenna Ostermeyer“ in Celle. Host Grotesk 400/500 für alles, Newsreader Italic nur für zwei Wörter, Geist Mono für Werte; Graustufen #fcfcfc bis #0b0b09, einzige Farbe #2f5bea für Fokus. Eine Lesespalte 640 px, rechts eine Randspalte als Legende: zeigt die vier Formen als Proben, markiert die Art des gerade fokussierten Elements und nennt Werte und Kontrast (folgt echtem :focus-visible über focusin). Dunkle Fallstudien-Fläche zeigt, warum dort die helle Fokusfarbe bzw. der Doppelring nötig ist. Kopieren-Knopf mit Clipboard-API und Rückfall-Text, Formular mit Bestätigung. Tab-Reihenfolge: Sprunglink, Name, Navigation, Inline-Link, drei Karten, Fallstudie-Knopf, PDF-Link, E-Mail, Kopieren, zwei Felder, Absenden, Fußlinks, Varianten-Pult. In WCAG 2.2 ist 2.4.11 Focus Not Obscured (Minimum, AA) und 2.4.13 Focus Appearance (AAA); beide so im Steckbrief. Referenzen: design-system.service.gov.uk, sarasoueidan.com. AD-Review 02.11.2026: Note 5. Nachgebessert: Fokus-Proben der Legende ohne Hand-Zeiger (sahen klickbar aus).",
  "varianten": [
   {
    "id": "ring",
    "name": "Ring in Markenfarbe",
    "wann": "Ruhige Seiten auf hellem Grund mit genau einer Markenfarbe: Freelancer, Architektur, Kanzlei, Praxis.",
    "werte": {
     "farbe": "#2f5bea, dunkel #8aa4ff",
     "breite": "2px",
     "versatz": "Link 2 · Knopf 3 · Feld 0 · Karte 6 px",
     "zusatz": "Link-Unterstrich 2px, Feldrand in Markenfarbe, Kartenfläche #f0f0f0"
    }
   },
   {
    "id": "doppel",
    "name": "Doppelring",
    "wann": "Seiten mit Bildern, Farbflächen, Spartenfarben oder Dark Mode, wo ein einfarbiger Ring nicht überall 3:1 erreicht: Kultur, Gastro, Kreativstudios.",
    "werte": {
     "aufbau": "box-shadow 0 0 0 var(--o) Grundfarbe, 0 0 0 calc(var(--o) + 4px) Textfarbe, dazwischen outline 2px #2f5bea",
     "versatz": "2px, Karte 6px",
     "dunkel": "Grund- und Textfarbe tauschen"
    }
   },
   {
    "id": "signal",
    "name": "Signalfläche",
    "wann": "Öffentliche Stellen, Vereine, Bildung und Gesundheit, wo der Fokus maximal auffallen soll (Prinzip des GOV.UK Design System).",
    "werte": {
     "link": "Fläche #ffdd00, Unterkante 4px #0b0b09",
     "knopf": "Fläche #ffdd00, Rand und Unterkante #0b0b09",
     "feld": "outline 3px #ffdd00, innen 2px #0b0b09",
     "karte": "Fläche #ffdd00 (6px Rand), Unterkante 4px #0b0b09",
     "kontrastmodus": "outline 3px transparent wird zur Systemfarbe"
    }
   }
  ]
 }
}