/* kit-a11y frontend.css — Widget (px-basiert, immun gegen Textskalierung) + Tweak-Klassen auf . */ /* ---------- Besucher-Tweaks (auf gesetzt) ---------- */ html.kit-a11y-contrast { filter: contrast(1.32); } html.kit-a11y-reduce-motion *, html.kit-a11y-reduce-motion *::before, html.kit-a11y-reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html.kit-a11y-line-height body :where(p, li, dd, dt, blockquote, a, span, h1, h2, h3, h4, h5, h6) { line-height: 1.9 !important; letter-spacing: .012em !important; } html.kit-a11y-links body a { text-decoration: underline !important; text-underline-offset: 2px; } html.kit-a11y-links body :where(a, button, [tabindex], input, select, textarea):focus { outline: 3px solid #1059b8 !important; outline-offset: 2px !important; } html.kit-a11y-readable-font body { font-family: "Atkinson Hyperlegible", Verdana, Tahoma, Arial, sans-serif !important; } html.kit-a11y-big-cursor, html.kit-a11y-big-cursor * { cursor: url('data:image/svg+xml;utf8,') 4 2, auto !important; } /* show-alt: JS setzt title=alt; ein dezenter Marker zeigt, dass eine Beschreibung anliegt. */ html.kit-a11y-show-alt body img[data-kit-a11y-alt] { outline: 2px dashed rgba(40, 77, 144, .5); outline-offset: -2px; } /* ---------- Widget ---------- */ .kit-a11y { --kit-a11y-accent: #284d90; position: fixed; z-index: 99999; font-size: 15px; line-height: 1.4; color: #1d2433; } /* Vier Ecken, waagerecht und senkrecht getrennt (0.2.0). Unten rechts bleibt Default, ist auf kit-Sites aber vom Termin-Knopf und „Nach oben" belegt. --right/--left bleiben als Altlast stehen: Sites, die noch die alte Markup-Fassung im HTML-Cache haben, springen sonst in die Ecke oben links. */ .kit-a11y--rechts, .kit-a11y--right { right: 20px; } .kit-a11y--links, .kit-a11y--left { left: 20px; } .kit-a11y--unten { bottom: 20px; } .kit-a11y--oben { top: 20px; } .kit-a11y--right:not(.kit-a11y--oben), .kit-a11y--left:not(.kit-a11y--oben) { bottom: 20px; } /* ---------- Eingebettet statt schwebend (0.3.0) ---------- Das Theme setzt den Knopf selbst, etwa in die Kopfzeile. Deshalb hier kein fixed und keine Ecke: das Element laeuft in der Textzeile mit. Der z-index bleibt hoch, damit das aufgeklappte Panel ueber der klebenden Navigation liegt (kit-kandlen-theme: .nav hat z-index 20). */ .kit-a11y--kopf { position: relative; display: inline-flex; vertical-align: middle; margin-left: .6rem; /* .kit-a11y setzt fuer die schwebende Fassung ein festes Dunkelgrau. Hier sitzt der Knopf mitten im Text und muss dessen Farbe uebernehmen — sonst steht er dunkelgrau auf dunkelblauem Grund. Das Panel bringt seine eigene Schriftfarbe mit, es haengt nicht an dieser Zeile. */ color: inherit; } /* Der runde 56px-Knopf mit Schatten sprengt jede Kopfzeile. Hier stattdessen schlicht in der Schriftfarbe der Umgebung (currentColor), damit er auf hellem wie dunklem Grund traegt. 32px ist bewusst nicht kleiner: darunter wird die Klickflaeche zu knapp (WCAG 2.5.8). */ .kit-a11y--kopf .kit-a11y-toggle { width: 32px; height: 32px; background: transparent; color: inherit; /* Rahmen in der Schriftfarbe: ohne ihn ist das nackte Zeichen nicht als Schaltflaeche zu erkennen (Jakob 01.08.2026). currentColor haelt das auf dunklem wie hellem Grund richtig. */ border: 1px solid currentColor; border-radius: 6px; box-shadow: none; } .kit-a11y--kopf .kit-a11y-toggle .kit-a11y-ico { width: 20px; height: 20px; } .kit-a11y--kopf .kit-a11y-toggle:hover { transform: none; box-shadow: none; background: rgba(127, 127, 127, .28); } .kit-a11y--kopf .kit-a11y-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; box-shadow: none; } /* Das Panel haengt senkrecht am Knopf, waagerecht aber am Fenster. Grund: Wo der Knopf steht, bestimmt das Theme. Richtet man das Panel rechtsbuendig am Knopf aus, laeuft es ueberall dort links aus dem Bild, wo der Knopf nicht am Rand sitzt — etwa solange eine Kopfzeile noch umbricht. Gemessen auf kit.kandlen-it.de: bis 767px umgebrochen (Knopf bei x=360), ab 768px einzeilig (x=700). Eine Breiten-Abfrage muesste diesen Punkt kennen, also Theme-Wissen im Plugin. Am Fenster ausgerichtet passt es ohne diese Annahme, auf jeder Breite. „top: auto“ laesst die Hoehe an der Stelle, an der das Panel ohne Positionierung stuende; der Versatz schiebt es um Knopfhoehe plus Abstand nach unten, sonst verdeckt es den Knopf. */ .kit-a11y--kopf .kit-a11y-panel { position: fixed; top: auto; margin-top: 42px; right: 10px; left: auto; width: 300px; max-width: calc(100vw - 20px); max-height: min(74vh, 560px); } .kit-a11y-toggle { width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--kit-a11y-accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); transition: transform .15s ease, box-shadow .15s ease; } .kit-a11y-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .34); } .kit-a11y-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--kit-a11y-accent); } .kit-a11y-toggle .kit-a11y-ico { width: 28px; height: 28px; } .kit-a11y-panel { position: absolute; width: 300px; max-width: calc(100vw - 40px); max-height: min(74vh, 560px); overflow-y: auto; background: #fff; color: #1d2433; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .26); padding: 16px; box-sizing: border-box; } .kit-a11y--rechts .kit-a11y-panel, .kit-a11y--right .kit-a11y-panel { right: 0; } .kit-a11y--links .kit-a11y-panel, .kit-a11y--left .kit-a11y-panel { left: 0; } /* Das Panel klappt vom Knopf weg, nicht ueber den Bildschirmrand hinaus. */ .kit-a11y--unten .kit-a11y-panel { bottom: 70px; } .kit-a11y--oben .kit-a11y-panel { top: 70px; } .kit-a11y--right:not(.kit-a11y--oben) .kit-a11y-panel, .kit-a11y--left:not(.kit-a11y--oben) .kit-a11y-panel { bottom: 70px; } .kit-a11y-panel[hidden] { display: none; } .kit-a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .kit-a11y-panel__title { font-size: 18px; margin: 0; font-weight: 700; color: var(--kit-a11y-accent); } .kit-a11y-close { border: 0; background: transparent; color: #5a6275; cursor: pointer; padding: 4px; border-radius: 6px; display: flex; } .kit-a11y-close:hover { background: #eef1f6; color: #1d2433; } .kit-a11y-group { margin-bottom: 12px; } .kit-a11y-group__label { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; } .kit-a11y-group__label .kit-a11y-ico { width: 18px; height: 18px; color: var(--kit-a11y-accent); } .kit-a11y-fontsize { display: flex; gap: 6px; } .kit-a11y-fontsize button { flex: 1; padding: 9px 0; border: 1px solid #d3d9e4; background: #f6f8fb; border-radius: 8px; font-size: 16px; font-weight: 700; color: #1d2433; cursor: pointer; } .kit-a11y-fontsize button:hover { background: #e9eef6; border-color: var(--kit-a11y-accent); } .kit-a11y-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .kit-a11y-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid #d3d9e4; border-radius: 8px; background: #fff; color: #1d2433; font-size: 15px; cursor: pointer; } .kit-a11y-opt .kit-a11y-ico { width: 20px; height: 20px; color: var(--kit-a11y-accent); flex: 0 0 auto; } .kit-a11y-opt:hover { background: #f6f8fb; border-color: var(--kit-a11y-accent); } .kit-a11y-opt[aria-pressed="true"] { background: var(--kit-a11y-accent); border-color: var(--kit-a11y-accent); color: #fff; } .kit-a11y-opt[aria-pressed="true"] .kit-a11y-ico { color: #fff; } .kit-a11y-reset { width: 100%; padding: 10px; border: 1px solid #cdd3da; background: #f0f2f6; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; color: #1d2433; } .kit-a11y-reset:hover { background: #e6e9ef; } .kit-a11y-note { font-size: 12px; color: #6b7280; margin: 10px 0 0; } .kit-a11y button:focus-visible { outline: 3px solid var(--kit-a11y-accent); outline-offset: 2px; }