/* ============================================================================ BSO Barrierefreiheit — Grundlagen, netzwerkweit ---------------------------------------------------------------------------- Angelegt am 12.08.2026 nach dem Vollaudit beider Shops. Hier steht nur, was auf JEDER Seite gilt. Komponentenspezifisches gehoert in die jeweilige Datei. Grundlage: BSO/ANWEISUNG-Barrierefreiheit-KTM-Husky.md Doku/40-Entscheidungen/ADR-0008 Zweites Orange fuer Text.md ========================================================================= */ /* ── 1 · Fokusring ────────────────────────────────────────────────────────── Bis zum Bricks-Ausbau am 12.08.2026 lieferte Bricks selbst ein `outline: auto 3px` aus — allerdings nur, weil diese Regel im zusammengefassten CSS zufaellig SPAETER stand als sein eigenes `outline: none` bei identischer Spezifitaet. Nach dem Ausbau blieb der 1-px-Browser-Standard uebrig. Beides ist keine Grundlage, auf der man WCAG 2.4.7 stehen lassen will. Deshalb hier ein eigener Ring, der nicht von fremden Ladereihenfolgen abhaengt. Bewusst NICHT in der Markenfarbe: #ff6600 erreicht gegen Weiss nur 2,94:1 und verfehlt damit die 3:1 aus 1.4.11. Der Ring war bis zum 04.09.2026 zweilagig (dunkler Kern plus heller Aussenring), damit er auf jedem Untergrund traegt. Die Idee war richtig, die Ausfuehrung nicht — siehe unten. ZWEI Korrekturen am 04.09.2026 (Kili: „komisch gestylter Rahmen, bei dunkel dunkel und bei hell hell und echt gross"): 1. `border-radius: 2px` stand hier und ueberschrieb die Form JEDES fokussierten Elements. Die Mengenpille im Warenkorb ist ein Oval (`border-radius:999px`) — beim Hineintippen wurde daraus ein Kasten. Der Radius gehoert dem Element, nicht dem Ring; `outline` folgt der Elementform von selbst. 2. Der Gegenring lag als `box-shadow: 0 0 0 6px` an. Zusammen mit 3 px Ring und 2 px Abstand ergab das einen 11 px breiten Kranz um ein 44 px kleines Feld. Schlimmer: Der Schatten fuellte auch die Abstandszone zwischen Element und Ring, und weil seine Farbe eine Flaeche ANNIMMT (weiss im Tag, #0f1011 in der Nacht), stand er auf jeder abweichenden Flaeche als sichtbarer Block da — im Nachtmodus auf der Kartenflaeche #16181c als dunkler Rahmen. Jetzt ein einlagiger 2-px-Ring mit 2 px Abstand. Das erfuellt die 2 px aus WCAG 2.4.11 und traegt seinen Kontrast gegen die Flaeche, auf der er wirklich liegt: dunkel im Tag, hell in der Nacht. Fuer die Faelle, in denen die Flaeche dieser Annahme widerspricht (dunkle Kopfleiste im Tagmodus), stehen die Sonderregeln direkt darunter — die gab es schon vorher, sie waren nur vom Gegenring verdeckt. */ :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible{ outline: 2px solid #16181c; outline-offset: 2px; } body.spf-night :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible, html.spf-night :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible{ outline-color: #ffffff; } /* Auf dunklen Flaechen im hellen Modus (Kopfleiste, Fusszeile) dreht sich das um. `:where()` haelt die Spezifitaet bei 0, damit diese Regeln gewinnen. */ #ktmps-header .ktmps-topbar :where(a, button):focus-visible, #ktmps-header #ktmps-nav-list > li > a:focus-visible, .ktmps-mega__left :where(a, button):focus-visible, .spffo :where(a, button, input):focus-visible{ outline-color: #ffffff; box-shadow: 0 0 0 6px rgba(0,0,0,.85); } /* Programmatisch fokussierte Ueberschriften (Dialogtitel, Sprungziele) sollen keinen Ring zeigen — dort setzt das Skript den Fokus, nicht der Nutzer. :focus-visible bleibt unberuehrt, Tastaturnutzer sehen ihn also weiterhin. */ :where(h1, h2, h3, [tabindex="-1"]):focus:not(:focus-visible){ outline: none } /* ── 2 · Sprunglink ───────────────────────────────────────────────────────── Markup und Grundstil liefert das Theme (bso-theme/header.php und style.css). Hier steht nur, was dort fehlt: Der Link muss ueber allem liegen, auch ueber dem Consent-Banner (z-index 2147483000) und dem Sticky-Kopf — sonst schiebt er sich unter das Banner und ist im Fokus trotzdem unsichtbar. */ .bso-skip{ z-index: 2147483001 !important; } /* ── 3 · Nur fuer Hilfsmittel ─────────────────────────────────────────────── Ersatz fuer `.screen-reader-text`. Diese Klasse kam bisher vom Theme; mit dem Bricks-Ausbau ist sie nicht mehr garantiert. Wo ein zugaenglicher Name daran haengt, verschwindet er sonst ersatzlos. Kein `display:none` — das nimmt den Text auch dem Screenreader. */ .bso-sr{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Sichtbar, sobald das Element selbst den Fokus bekommt (z. B. Sprunglinks). */ .bso-sr-focusable:focus, .bso-sr-focusable:focus-within{ position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } /* ── 4 · Farbtokens ───────────────────────────────────────────────────────── Siehe ADR-0008. Kurzfassung: #ff6600 hat einen Rotkanal von 255 und kann als Textfarbe auf Weiss rechnerisch nie 4,5:1 erreichen — die obere Schranke liegt bei 4,0:1 (reines #ff0000). Deshalb eine eigene Textvariante. Im Nachtmodus erreicht die Markenfarbe selbst 5,82:1 und bleibt unveraendert. */ :root{ /* Orange als Text: ZWEI Rollen, weil die Schwelle an der Schriftgroesse haengt. Ab 24 px (oder ab 18,66 px fett) gilt 3:1, darunter 4,5:1. --o-text-l nur fuer grosse Schrift. Praktisch die Markenfarbe: #f96300 steht bei 3,08:1 und ist von #ff6600 mit blossem Auge nicht zu unterscheiden. Damit bleibt der Produktpreis (28 px) optisch unveraendert und erfuellt trotzdem sein Kriterium. --o-text fuer alles darunter. Auf einer einzigen Kategorieseite stehen 11 orange Texte zwischen 12,5 und 16 px — Telefonnummer, „Vertrag widerrufen", Paginierung, Kategorielinks. Sie brauchen 4,5:1, und mit --o-text-l waeren sie alle weiterhin durchgefallen. Entscheidung Kili, 12.08.2026. WICHTIG: --o-text-l nie auf kleine Schrift anwenden. Im Zweifel --o-text. */ /* Beide Werte kommen aus der Marken-Palette (class-spf-brand.php), nicht aus dieser Datei: Bis zum 13.08.2026 standen hier KTMs Hexwerte fest, und der Husqvarna-Preis war dadurch orange. Die Rueckfaelle sind KTMs Werte. */ --o-text-l: var(--spf-brand-text-l, #f96300); /* 3,08:1 auf #ffffff — nur ab 24 px */ --o-text: var(--spf-brand-text, #f96300); /* 3,08:1 auf #ffffff, 2,88:1 auf #f7f7f7 — seit 04.09.2026 das kraeftige Orange (Kili) */ --o-on: #0f1011; /* Schrift auf oranger Flaeche: 6,49:1 */ --grey-text: #6b6b6b; /* 5,33:1 auf Weiss, 4,52:1 auf dem beigen Tab-Grund #efece7 */ --grey-soft: #767676; /* 4,54:1 — Untergrenze */ /* Statusfarben stehen NICHT hier, sondern im Lieferzeiten-Plugin: dtpw rechnet sie aus der jeweils eingestellten Signalfarbe (SPF readable_ink) und gibt sie als --dtpw-status-ink aus. Hier waeren sie eine zweite Wahrheit — und beim naechsten Farbwechsel im Backend sofort falsch. */ } body.spf-night, html.spf-night{ /* Nachts traegt die Nacht-Signatur der Marke: bei KTM Orange (5,82:1 auf #0f1011), bei Husqvarna Gelb — Dunkelblau kaeme dort auf 1,7:1. Auch hier stand vorher KTM-Orange fest. */ --o-text-l: var(--spf-brand-night, #ff6600); --o-text: var(--spf-brand-night, #ff6600); --grey-text: #a9adb3; /* 6,4:1 */ --grey-soft: #a9adb3; } /* ── 5 · Buttons ──────────────────────────────────────────────────────────── Das komplette Buttondesign inklusive Schriftkontur (1.4.3), Umrisskante (1.4.11) und Fokusring steht seit dem 12.08.2026 in `spf-buttons.css`. Hier stand es kurzzeitig auch — beides zugleich haette sich beim Fokusring ins Gehege gekommen, weil dort `box-shadow` zwei Aufgaben traegt. Fuer eigene Bausteine ausserhalb des Buttonsystems gibt es die Hilfsklasse `.bso-on-brand`: Sie setzt weisse Schrift auf einer Markenflaeche lesbar, indem die Konturfarbe gemessen wird (#0f1011 auf #ff6600 = 7,15:1) statt der Fuellung (2,94:1). */ @supports (paint-order: stroke){ .bso-on-brand{ -webkit-text-stroke: 1px var(--o-on); paint-order: stroke fill; } } @supports not (paint-order: stroke){ /* Ohne paint-order zeichnet der Browser die Kontur mittig auf die Buchstabenkante — die Schrift wirkt duenner statt kraeftiger. Dann traegt die dunkle Schriftfarbe. */ .bso-on-brand{ color: var(--o-on) } } /* ── 6 · Bewegung ─────────────────────────────────────────────────────────── WCAG 2.3.3. Der Shop hat mit dem Fahrzeugfilter ohnehin viel Bewegung. */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }