/** * ModuCore Accessibility-Toolbar – Frontend. * Globale Effekte hängen an -Klassen (mc-a11y-*), gesetzt per JS. */ /* Atkinson Hyperlegible (SIL OFL 1.1, Braille Institute) – lokal gebündelt. */ @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; } @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; } @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; } @font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; } /* ---------------------------------------------------------------- Skip-Link */ .moducore-a11y-skip { position: fixed; top: -100px; left: 1rem; z-index: 1000000; background: #0058bc; color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 0.5rem 0.5rem; font: 600 0.95rem/1 "Inter", sans-serif; text-decoration: none; transition: top 0.15s ease; } .moducore-a11y-skip:focus { top: 0; outline: 3px solid #fff; outline-offset: -6px; } /* -------------------------------------------------------------- Toolbar-Root */ .moducore-a11y { --mc-a11y-accent: #0058bc; position: fixed; bottom: 1rem; z-index: 999997; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .moducore-a11y--right { right: 1rem; } .moducore-a11y--left { left: 1rem; } .moducore-a11y *, .moducore-a11y *::before, .moducore-a11y *::after { box-sizing: border-box; } /* hidden muss IMMER gewinnen – das Panel setzt display:flex, was das UA-Stylesheet ([hidden] => display:none) sonst überschreiben würde. */ .moducore-a11y [hidden] { display: none !important; } .moducore-a11y__toggle { width: 50px; height: 50px; border: none; border-radius: 50%; background: var(--mc-a11y-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 20px rgba(26, 28, 29, 0.25); } .moducore-a11y__toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* -------------------------------------------------------------------- Panel */ .moducore-a11y__panel { position: absolute; bottom: 62px; width: 280px; max-width: calc(100vw - 2rem); background: #fff; color: #1a1c1d; border-radius: 0.9rem; padding: 1rem; box-shadow: 0 20px 60px rgba(26, 28, 29, 0.2); display: flex; flex-direction: column; gap: 0.6rem; } .moducore-a11y--right .moducore-a11y__panel { right: 0; } .moducore-a11y--left .moducore-a11y__panel { left: 0; } .moducore-a11y__head { display: flex; align-items: center; justify-content: space-between; } .moducore-a11y__title { font-family: "Manrope", "Inter", sans-serif; font-size: 1.05rem; font-weight: 700; margin: 0; } .moducore-a11y__close { border: none; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: #6b7075; } .moducore-a11y__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .moducore-a11y__row--col { flex-direction: column; align-items: stretch; } .moducore-a11y__label { font-size: 0.85rem; font-weight: 600; } .moducore-a11y__stepper { display: flex; gap: 0.35rem; } .moducore-a11y__stepper button { min-width: 44px; min-height: 40px; border: none; border-radius: 0.5rem; background: #f3f3f5; color: #1a1c1d; font-weight: 700; cursor: pointer; } .moducore-a11y__opt, .moducore-a11y__reset { width: 100%; text-align: left; border: none; border-radius: 0.5rem; background: #f3f3f5; color: #1a1c1d; padding: 0.6rem 0.75rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; min-height: 44px; } .moducore-a11y__opt[aria-pressed="true"] { background: var(--mc-a11y-accent); color: #fff; } .moducore-a11y__contrast { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem; } .moducore-a11y__contrast button { border: none; border-radius: 0.5rem; background: #f3f3f5; color: #1a1c1d; padding: 0.5rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; min-height: 40px; } .moducore-a11y__contrast button[aria-pressed="true"] { background: var(--mc-a11y-accent); color: #fff; } .moducore-a11y__reset { background: transparent; color: #6b7075; text-align: center; } .moducore-a11y__panel button:focus-visible { outline: 2px solid var(--mc-a11y-accent); outline-offset: 2px; } /* ======================================================= Globale Effekte */ html.mc-a11y-fontscale { font-size: var(--mc-a11y-font, 100%); } html.mc-a11y-linescale body { line-height: var(--mc-a11y-line, 1.5) !important; } html.mc-a11y-readable body :not(.moducore-a11y):not(.moducore-a11y *) { font-family: "Atkinson Hyperlegible", Verdana, "Segoe UI", Tahoma, sans-serif !important; letter-spacing: 0.01em; } html.mc-a11y-links body a:not(.moducore-a11y-skip) { text-decoration: underline !important; text-underline-offset: 2px; font-weight: 600; } html.mc-a11y-noanim body *, html.mc-a11y-noanim body *::before, html.mc-a11y-noanim body *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Kontrast-Modi. WICHTIG: Filter dürfen weder auf body noch auf html liegen – beides macht das Element zum Containing Block für position:fixed (Toolbar/Banner scrollen mit; Chrome bricht auch beim Root-Filter, inkl. weißer Scroll-Artefakte). Daher: Filter auf die BODY-KINDER, eigene Fixed-Widgets ausgenommen – die behalten so Farben UND Fixed-Positionierung ohne Rückdreh-Tricks. Bekannte Grenze: fixe/sticky Theme-Header INNERHALB gefilterter Wrapper verlieren ihre Fixierung, solange ein Kontrast-Modus aktiv ist. */ html.mc-a11y-contrast-high body > :not(.moducore-a11y):not(.moducore-cc):not(.moducore-cc-revoke):not(.moducore-a11y-skip) { filter: contrast(1.5); } html.mc-a11y-contrast-mono body > :not(.moducore-a11y):not(.moducore-cc):not(.moducore-cc-revoke):not(.moducore-a11y-skip) { filter: grayscale(1); } html.mc-a11y-contrast-sepia body > :not(.moducore-a11y):not(.moducore-cc):not(.moducore-cc-revoke):not(.moducore-a11y-skip) { filter: sepia(0.65); } html.mc-a11y-contrast-dark body { background: #1a1c1d; } html.mc-a11y-contrast-dark body > :not(.moducore-a11y):not(.moducore-cc):not(.moducore-cc-revoke):not(.moducore-a11y-skip) { filter: invert(1) hue-rotate(180deg); } /* Medien in gefilterten Wrappern doppelt invertieren → wieder Originalfarben. */ html.mc-a11y-contrast-dark body :where( img, picture, video, iframe ):not(.moducore-a11y *):not(.moducore-cc *) { filter: invert(1) hue-rotate(180deg); } @media (prefers-reduced-motion: reduce) { .moducore-a11y-skip { transition: none; } }