/** * Aux Accessibility Widget – Page Adjustments * These classes are applied to to modify page appearance. * * Contrast strategy: * - Dunkel / Invertiert: filter-based (invert colors, counter-invert media * so images/videos/bg-images look natural). The site's design structure * is preserved; only the luminance is flipped. * - Hell: brightness + contrast + saturation boost. Keeps all colors, * just makes the page more readable. * - Hoher Kontrast: contrast + saturation boost. Colors stay the same, * they just become more vivid and distinguishable. */ /* ══════════════════════════════════ DARK MODE – invert, preserve media ══════════════════════════════════ */ html.aux-contrast-dark { filter: invert(1) hue-rotate(180deg) !important; background-color: #ffffff !important; } /* Counter-invert media so they look natural */ html.aux-contrast-dark img, html.aux-contrast-dark video, html.aux-contrast-dark picture, html.aux-contrast-dark iframe, html.aux-contrast-dark embed, html.aux-contrast-dark object, html.aux-contrast-dark canvas, html.aux-contrast-dark svg:not(.aux-widget svg), html.aux-contrast-dark .aux-has-bg-image, html.aux-contrast-dark [style*="background-image"], html.aux-contrast-dark [style*="background:url"], html.aux-contrast-dark [style*="background: url"], html.aux-contrast-dark .aux-widget { filter: invert(1) hue-rotate(180deg) !important; } /* Keep widget on top even with filter creating stacking context */ html.aux-contrast-dark .aux-widget, html.aux-contrast-inverted .aux-widget { position: fixed !important; z-index: 2147483647 !important; } /* ══════════════════════════════════ LIGHT MODE – brighter, no color change ══════════════════════════════════ */ html.aux-contrast-light { filter: brightness(1.12) contrast(1.08) saturate(1.15) !important; } /* ══════════════════════════════════ HIGH CONTRAST – boost contrast only, keep the site's original colors ══════════════════════════════════ */ html.aux-contrast-high { filter: contrast(1.5) saturate(1.3) !important; } /* ══════════════════════════════════ INVERTED – pure inversion ══════════════════════════════════ */ html.aux-contrast-inverted { filter: invert(1) !important; background-color: #ffffff !important; } html.aux-contrast-inverted img, html.aux-contrast-inverted video, html.aux-contrast-inverted picture, html.aux-contrast-inverted iframe, html.aux-contrast-inverted embed, html.aux-contrast-inverted object, html.aux-contrast-inverted canvas, html.aux-contrast-inverted svg:not(.aux-widget svg), html.aux-contrast-inverted .aux-has-bg-image, html.aux-contrast-inverted [style*="background-image"], html.aux-contrast-inverted [style*="background:url"], html.aux-contrast-inverted [style*="background: url"], html.aux-contrast-inverted .aux-widget { filter: invert(1) !important; } /* ═══════════════════════════════ TEXT SIZE (3 steps) ═══════════════════════════════ */ html.aux-text-size-1 body { font-size: 110% !important; } html.aux-text-size-2 body { font-size: 125% !important; } html.aux-text-size-3 body { font-size: 150% !important; } /* ═══════════════════════════════ LINE HEIGHT (3 steps) ═══════════════════════════════ */ html.aux-line-height-1 *:not(.aux-widget *) { line-height: 1.8 !important; } html.aux-line-height-2 *:not(.aux-widget *) { line-height: 2.2 !important; } html.aux-line-height-3 *:not(.aux-widget *) { line-height: 2.6 !important; } /* ═══════════════════════════════ LETTER SPACING (3 steps) ═══════════════════════════════ */ html.aux-letter-spacing-1 *:not(.aux-widget *) { letter-spacing: 0.05em !important; } html.aux-letter-spacing-2 *:not(.aux-widget *) { letter-spacing: 0.1em !important; } html.aux-letter-spacing-3 *:not(.aux-widget *) { letter-spacing: 0.15em !important; } /* ═══════════════════════════════ TEXT ALIGNMENT ═══════════════════════════════ */ html.aux-text-align-left *:not(.aux-widget *) { text-align: left !important; } html.aux-text-align-center *:not(.aux-widget *) { text-align: center !important; } html.aux-text-align-right *:not(.aux-widget *) { text-align: right !important; } /* ═══════════════════════════════ HIGHLIGHT LINKS ═══════════════════════════════ */ html.aux-highlight-links a:not(.aux-widget a) { outline: 3px solid #ff6600 !important; outline-offset: 2px !important; text-decoration: underline !important; text-decoration-color: #ff6600 !important; text-underline-offset: 3px !important; } /* ═══════════════════════════════ HIGHLIGHT HEADINGS ═══════════════════════════════ */ html.aux-highlight-headings h1:not(.aux-widget h1), html.aux-highlight-headings h2:not(.aux-widget h2), html.aux-highlight-headings h3:not(.aux-widget h3), html.aux-highlight-headings h4:not(.aux-widget h4), html.aux-highlight-headings h5:not(.aux-widget h5), html.aux-highlight-headings h6:not(.aux-widget h6) { outline: 2px dashed currentColor !important; outline-offset: 4px !important; } html.aux-highlight-headings h1:not(.aux-widget h1)::before { content: 'H1 ' !important; font-size: 10px !important; font-weight: 700 !important; background: #1a73e8 !important; color: #fff !important; padding: 1px 5px !important; border-radius: 3px !important; margin-right: 6px !important; vertical-align: middle !important; } html.aux-highlight-headings h2:not(.aux-widget h2)::before { content: 'H2 ' !important; font-size: 10px !important; font-weight: 700 !important; background: #2196f3 !important; color: #fff !important; padding: 1px 5px !important; border-radius: 3px !important; margin-right: 6px !important; vertical-align: middle !important; } html.aux-highlight-headings h3:not(.aux-widget h3)::before { content: 'H3 ' !important; font-size: 10px !important; font-weight: 700 !important; background: #03a9f4 !important; color: #fff !important; padding: 1px 5px !important; border-radius: 3px !important; margin-right: 6px !important; vertical-align: middle !important; } html.aux-highlight-headings h4:not(.aux-widget h4)::before { content: 'H4 ' !important; font-size: 10px !important; font-weight: 700 !important; background: #00bcd4 !important; color: #fff !important; padding: 1px 5px !important; border-radius: 3px !important; margin-right: 6px !important; vertical-align: middle !important; } html.aux-highlight-headings h5:not(.aux-widget h5)::before { content: 'H5 ' !important; font-size: 10px !important; font-weight: 700 !important; background: #009688 !important; color: #fff !important; padding: 1px 5px !important; border-radius: 3px !important; margin-right: 6px !important; vertical-align: middle !important; } html.aux-highlight-headings h6:not(.aux-widget h6)::before { content: 'H6 ' !important; font-size: 10px !important; font-weight: 700 !important; background: #4caf50 !important; color: #fff !important; padding: 1px 5px !important; border-radius: 3px !important; margin-right: 6px !important; vertical-align: middle !important; } /* ═══════════════════════════════ BIG CURSOR ═══════════════════════════════ */ html.aux-big-cursor, html.aux-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 6l28 16-12 4-4 12z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important; } html.aux-big-cursor a, html.aux-big-cursor button, html.aux-big-cursor [role="button"], html.aux-big-cursor input[type="submit"], html.aux-big-cursor input[type="button"], html.aux-big-cursor select { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M20 6v14h-6l10 16 10-16h-6V6z' fill='%23000' stroke='%23fff' stroke-width='2' transform='rotate(180 24 24)'/%3E%3C/svg%3E") 24 4, pointer !important; } /* ═══════════════════════════════ STOP ANIMATIONS ═══════════════════════════════ */ html.aux-stop-animations *:not(.aux-widget *), html.aux-stop-animations *:not(.aux-widget *)::before, html.aux-stop-animations *:not(.aux-widget *)::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.aux-stop-animations img[src$=".gif"]:not(.aux-widget img) { visibility: hidden !important; } /* ═══════════════════════════════ DYSLEXIA FONT ═══════════════════════════════ */ @font-face { font-family: 'OpenDyslexic'; src: url('../css/fonts/OpenDyslexic/OpenDyslexic-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('../css/fonts/OpenDyslexic/OpenDyslexic-Bold.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; } html.aux-dyslexia-font *:not(.aux-widget *) { font-family: 'OpenDyslexic', sans-serif !important; } /* ═══════════════════════════════ FOCUS HIGHLIGHT ═══════════════════════════════ */ html.aux-focus-highlight a:focus, html.aux-focus-highlight button:focus, html.aux-focus-highlight input:focus, html.aux-focus-highlight select:focus, html.aux-focus-highlight textarea:focus, html.aux-focus-highlight [tabindex]:focus { outline: 4px solid #ff6600 !important; outline-offset: 4px !important; box-shadow: 0 0 0 6px rgba(255, 102, 0, 0.3) !important; } /* ═══════════════════════════════ HIDE IMAGES (only when user toggles) ═══════════════════════════════ */ html.aux-hide-images img:not(.aux-widget img), html.aux-hide-images picture:not(.aux-widget picture), html.aux-hide-images svg:not(.aux-widget svg), html.aux-hide-images video:not(.aux-widget video), html.aux-hide-images [style*="background-image"]:not(.aux-widget *) { opacity: 0.05 !important; } /* ═══════════════════════════════ TEXT READER HIGHLIGHT ═══════════════════════════════ */ .aux-tts-highlight { background-color: rgba(26, 115, 232, 0.2) !important; outline: 2px solid #1a73e8 !important; outline-offset: 2px !important; }