/** * Accessibility Toolbar – Frontend-Stylesheet. * * Enthält: * 1. Lokal gebündelte Schriftarten (@font-face) mit System-Fallbacks. * 2. Die Wirkungs-Klassen auf (Schriftgröße, Kontrast, Schrift, * Links-Hervorhebung, Tastatur-Fokus). * 3. Die Gestaltung der Toolbar selbst (Sidebar, Icon-Leiste, Buttons), * barrierearm umgesetzt: Zielgröße >= 24px, sichtbarer Fokus >= 3:1, * responsiv ab 320px, prefers-reduced-motion berücksichtigt. * * Die Farben stammen aus per Inline-CSS gesetzten Custom Properties * (--at-bg, --at-text, --at-accent, --at-accent-text, --at-hover, --at-focus). * Hier werden überall sichere Fallback-Werte mitgegeben. */ /* ------------------------------------------------------------------------- * 1. Lokal gebündelte Schriftarten * Die Schriftdateien liegen unter assets/fonts/ (Pfad relativ zu dieser * Datei: ../../assets/fonts/). Fehlen sie, greift automatisch der * System-Fallback – die Toolbar bleibt funktionsfähig. * ---------------------------------------------------------------------- */ @font-face { font-family: "Atkinson Hyperlegible"; src: url("../../assets/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../../assets/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../../assets/fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../../assets/fonts/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("../../assets/fonts/OpenDyslexic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("../../assets/fonts/OpenDyslexic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("../../assets/fonts/OpenDyslexic-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("../../assets/fonts/OpenDyslexic-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* ------------------------------------------------------------------------- * 2. Wirkungs-Klassen auf * ---------------------------------------------------------------------- */ /* Schriftgröße: Die Seiteninhalte werden per Zoom skaliert. Dadurch wachsen auch fest in Pixeln definierte Texte proportional mit (reines Skalieren der Wurzel-Schriftgröße würde nur rem/em-Werte erfassen). Die Toolbar selbst ist standardmäßig ausgenommen – sie soll sich beim Vergrößern nicht mit aufblähen. Über die Backend-Option "scale_toolbar" lässt sich das umstellen. */ html.at-fontsize-active body > *:not(.at-toolbar):not(.at-skip-link):not(.at-sr-live):not(script):not(style):not(link) { zoom: var(--at-font-scale, 1); } /* Die Inline-Icon-Leiste (Shortcode) liegt im Inhalt und würde mitskaliert – daher per Gegen-Zoom wieder auf Normalgröße zurückrechnen. */ html.at-fontsize-active .at-toolbar--iconbar:not(.at-scale-with-page) { zoom: var(--at-font-scale-inv, 1); } /* Opt-in (Backend): Toolbar zusammen mit der Seite vergrößern. */ html.at-fontsize-active .at-toolbar--sidebar.at-scale-with-page { zoom: var(--at-font-scale, 1); } html.at-fontsize-active .at-toolbar--iconbar.at-scale-with-page { zoom: 1; } /* Hoher Kontrast: kräftiges Schwarz/Weiß-Schema mit gelben Links. Die Toolbar selbst (.at-toolbar und ihre Kinder) sowie die Sprungmarke werden über :not() ausgenommen, damit sie bedienbar bleiben. */ html.at-contrast-high body { background: #000 !important; color: #fff !important; } html.at-contrast-high body *:not(.at-toolbar):not(.at-toolbar *):not(.at-skip-link):not(.at-sr-live) { background-color: transparent !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; } html.at-contrast-high a:not(.at-skip-link), html.at-contrast-high a:not(.at-skip-link) * { color: #ff0 !important; text-decoration: underline !important; } html.at-contrast-high :focus-visible { outline: 3px solid #ff0 !important; outline-offset: 2px !important; } /* Dunkelmodus: dunkles, augenschonendes Schema (weniger hart als Kontrast). */ html.at-contrast-dark { color-scheme: dark; } html.at-contrast-dark body { background: #121212 !important; color: #e8e8e8 !important; } html.at-contrast-dark body *:not(.at-toolbar):not(.at-toolbar *):not(.at-skip-link):not(.at-sr-live) { background-color: transparent !important; color: #e8e8e8 !important; border-color: #5a5a5a !important; } html.at-contrast-dark a:not(.at-skip-link), html.at-contrast-dark a:not(.at-skip-link) * { color: #8ab4f8 !important; } html.at-contrast-dark img, html.at-contrast-dark video { filter: brightness(0.85); } /* Lese-Schriftarten: ersetzen die Seitenschrift. Verbreitete Icon-Fonts (dashicons, Font Awesome o. Ä.) werden ausgenommen, damit ihre Symbole nicht zerstört werden. */ html.at-font-readable body, html.at-font-readable body *:not([class*="icon"]):not([class*="fa-"]):not(.dashicons):not(.at-icon) { font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; } html.at-font-dyslexic body, html.at-font-dyslexic body *:not([class*="icon"]):not([class*="fa-"]):not(.dashicons):not(.at-icon) { font-family: "OpenDyslexic", "Comic Sans MS", system-ui, sans-serif !important; letter-spacing: 0.03em; word-spacing: 0.08em; line-height: 1.6; } /* Links & interaktive Elemente hervorheben (Toolbar-eigene Buttons ausgenommen, um die Leiste nicht zu überladen). */ html.at-links-highlight a:not(.at-skip-link), html.at-links-highlight :is(button, [role="button"], input[type="submit"], input[type="button"]):not(.at-btn):not(.at-toggle):not(.at-close) { text-decoration: underline !important; outline: 2px solid var(--at-accent, #15497a) !important; outline-offset: 2px !important; } html.at-links-highlight a:not(.at-skip-link):hover, html.at-links-highlight a:not(.at-skip-link):focus { background-color: var(--at-accent, #15497a) !important; color: var(--at-accent-text, #ffffff) !important; } /* Verstärkter Tastatur-Fokus-Indikator. */ html.at-keyboard-focus *:focus-visible { outline: 3px solid var(--at-focus, #b32d00) !important; outline-offset: 3px !important; border-radius: 2px; } /* Fallback für Browser-Situationen ohne :focus-visible-Unterstützung. */ html.at-keyboard-focus a:focus, html.at-keyboard-focus button:focus, html.at-keyboard-focus input:focus, html.at-keyboard-focus select:focus, html.at-keyboard-focus textarea:focus { outline: 3px solid var(--at-focus, #b32d00); outline-offset: 3px; } /* ------------------------------------------------------------------------- * 3. Toolbar – gemeinsame Grundlagen * ---------------------------------------------------------------------- */ .at-toolbar, .at-toolbar *, .at-toolbar *::before, .at-toolbar *::after { box-sizing: border-box; } .at-toolbar { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.4; } /* Visuell verborgene Live-Region (nur für Screenreader). */ .at-sr-live { 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; } /* Sprungmarke „Zum Inhalt springen“. */ .at-skip-link { position: fixed; bottom: 40px; right: 0; z-index: 99999; padding: 0.75rem 1.25rem; background: var(--at-accent, #15497a); color: var(--at-accent-text, #ffffff); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1rem; text-decoration: none; border-radius: 6px 0 0 6px; transform: translateY(-120%); transition: transform 0.15s ease; } .at-skip-link:focus { outline: 3px solid var(--at-focus, #b32d00); outline-offset: 2px; } @media screen and (max-width: 782px) { .admin-bar .at-skip-link { bottom: 46px; } } /* Gemeinsamer Button. */ .at-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 44px; min-height: 44px; margin: 0; padding: 0.5rem 0.75rem; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--at-text, #1b1b1b); font-family: inherit; font-size: 1rem; line-height: 1.2; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; } .at-btn:hover { background: var(--at-hover, #0d3257); color: var(--at-accent-text, #ffffff); } .at-btn:focus-visible { outline: 3px solid var(--at-focus, #b32d00); outline-offset: 2px; } .at-btn[aria-pressed="true"] { background: var(--at-accent, #15497a); color: var(--at-accent-text, #ffffff); border-color: var(--at-accent, #15497a); } .at-btn__icon { display: inline-flex; flex: 0 0 auto; width: 24px; height: 24px; } .at-btn__icon svg, .at-btn__img { display: block; width: 24px; height: 24px; } .at-btn__text { flex: 1 1 auto; } /* ------------------------------------------------------------------------- * 3a. Sidebar-Modus * ---------------------------------------------------------------------- */ .at-toolbar--sidebar { position: fixed; top: 0; bottom: 0; z-index: 100000; width: 0; } .at-toolbar--sidebar.at-side-right { right: 0; } .at-toolbar--sidebar.at-side-left { left: 0; } /* Toggle-Button (am Bildschirmrand fixiert). */ .at-toggle { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: none; background: var(--at-accent, #15497a); color: var(--at-accent-text, #ffffff); cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); -webkit-appearance: none; appearance: none; } .at-side-right .at-toggle { right: 0; border-radius: 8px 0 0 8px; } .at-side-left .at-toggle { left: 0; border-radius: 0 8px 8px 0; } .at-pos-top .at-toggle { top: 1rem; } .at-pos-middle .at-toggle { top: 50%; transform: translateY(-50%); } .at-pos-bottom .at-toggle { bottom: 1rem; } .at-toggle:hover { background: var(--at-hover, #0d3257); } .at-toggle:focus-visible { outline: 3px solid var(--at-focus, #b32d00); outline-offset: 2px; } .at-toggle__icon { display: inline-flex; width: 28px; height: 28px; } .at-toggle__icon svg { display: block; width: 28px; height: 28px; } /* Panel. Geschlossen ist es ausgeblendet und seitlich herausgeschoben; */ /* das Ein- und Ausblenden wird per .at-open animiert (immer mit Transition). */ .at-sidebar { position: fixed; top: 0; bottom: 0; display: flex; flex-direction: column; width: 340px; max-width: 90vw; padding: 1rem; background: var(--at-bg, #ffffff); color: var(--at-text, #1b1b1b); box-shadow: 0 0 28px rgba(0, 0, 0, 0.35); overflow-y: auto; visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; } .at-side-right .at-sidebar { right: 0; transform: translateX(100%); } .at-side-left .at-sidebar { left: 0; transform: translateX(-100%); } /* Geöffneter Zustand: eingeblendet und an die Kante geschoben. */ .at-toolbar--sidebar.at-open .at-sidebar { visibility: visible; transform: translateX(0); transition: transform 0.22s ease, visibility 0s; } /* Fallback ohne JavaScript: Panel bleibt vollständig ausgeblendet. */ .at-sidebar[hidden] { display: none; } .at-sidebar:focus { outline: none; } .at-sidebar__header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--at-accent, #15497a); } .at-sidebar__title { margin: 0; font-size: 1.25rem; line-height: 1.2; color: var(--at-text, #1b1b1b); } .at-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--at-text, #1b1b1b); cursor: pointer; -webkit-appearance: none; appearance: none; } .at-close:hover { background: var(--at-hover, #0d3257); color: var(--at-accent-text, #ffffff); } .at-close:focus-visible { outline: 3px solid var(--at-focus, #b32d00); outline-offset: 2px; } .at-sidebar__body { flex: 1 1 auto; } .at-group { margin-bottom: 1.25rem; } .at-group__title { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700; color: var(--at-text, #1b1b1b); } .at-group__controls { display: flex; flex-direction: column; gap: 0.5rem; } .at-group--reset { margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid currentColor; } .at-toolbar--sidebar .at-btn { width: 100%; border-color: var(--at-accent, #15497a); } /* Transparenz-Hinweis. */ .at-disclaimer { margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid currentColor; font-size: 0.8125rem; line-height: 1.4; opacity: 0.85; } /* ------------------------------------------------------------------------- * 3b. Shortcode-Modus (Icon-Leiste) * ---------------------------------------------------------------------- */ .at-toolbar--iconbar { display: block; margin: 1rem 0; } .at-toolbar--iconbar.at-align-left { text-align: left; } .at-toolbar--iconbar.at-align-center { text-align: center; } .at-toolbar--iconbar.at-align-right { text-align: right; } .at-iconbar { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem; background: var(--at-bg, #ffffff); border: 1px solid var(--at-accent, #15497a); border-radius: 10px; vertical-align: top; } .at-btn--iconbar { position: relative; justify-content: center; padding: 0.5rem; border-color: var(--at-accent, #15497a); } /* Sichtbarer Tooltip der Icon-Buttons (rein dekorativ, aria-hidden). */ .at-btn--iconbar .at-btn__tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 1; padding: 0.25rem 0.5rem; background: var(--at-text, #1b1b1b); color: var(--at-bg, #ffffff); border-radius: 4px; font-size: 0.8125rem; line-height: 1.3; white-space: nowrap; opacity: 0; transform: translateX(-50%); pointer-events: none; transition: opacity 0.12s ease; } .at-btn--iconbar:hover .at-btn__tooltip, .at-btn--iconbar:focus-visible .at-btn__tooltip, .at-btn--iconbar:focus .at-btn__tooltip { opacity: 1; } /* Größenvarianten. */ .at-size-small .at-btn--iconbar { min-width: 40px; min-height: 40px; } .at-size-large .at-btn--iconbar { min-width: 52px; min-height: 52px; } .at-size-large .at-btn__icon, .at-size-large .at-btn__icon svg, .at-size-large .at-btn__img { width: 28px; height: 28px; } .at-disclaimer--inline { max-width: 40rem; margin-top: 0.5rem; border-top: 0; padding-top: 0; } /* Hinweis für Redakteure, wenn der Shortcode-Modus deaktiviert ist. */ .at-admin-hint { padding: 0.75rem 1rem; border-left: 4px solid var(--at-focus, #b32d00); background: #fff8f5; color: #1b1b1b; } /* ------------------------------------------------------------------------- * 4. Responsiv & Bewegungs-Reduktion * ---------------------------------------------------------------------- */ /* Sehr schmale Viewports (ab 320px): Sidebar nimmt die volle Breite ein. */ @media (max-width: 360px) { .at-sidebar { width: 100vw; max-width: 100vw; } } @media (prefers-reduced-motion: reduce) { .at-skip-link, .at-btn, .at-toggle, .at-close, .at-btn__tooltip, .at-sidebar { transition: none !important; animation: none !important; } }