/* Barrierefreies Bedienkonzept. Diese Datei wird als letztes Stylesheet geladen (siehe templates/base.html.twig) und liegt bewusst NICHT in config/legacy_assets.yaml – die Datei wird beim Mirror-Import neu erzeugt und würde den Eintrag verlieren. Aufbau: 1. Grundlagen, die immer gelten (Sprungmarke, Fokus, Aufklapper) 2. Die Bedienleiste: am linken Fensterrand, auf schmalen Geräten in der Kopfleiste 3. Die einzelnen Modi, geschaltet über data-Attribute am -Element 4. Rücknahme der Modi für die Bedienleiste selbst Die Modi überschreiben das aus Joomla importierte Template. Da dieses durchgängig mit "!important" und festen Pixelwerten arbeitet, kommen die Überschreibungen ohne "!important" nicht durch. Der Inhalt der Seite steckt in .body-wrapper, das Mobilmenü daneben in .offcanvas-menu. Das Panel liegt außerhalb und bleibt von den Modi unberührt – sonst würde es sich im Vergrößerungsmodus selbst mitskalieren. Die Leiste steht dagegen im Markup in der Kopfleiste und damit innerhalb von .body-wrapper; was die Modi dort anrichten würden, nimmt Abschnitt 4 wieder zurück. */ :root { --a11y-blue: #3c5c81; --a11y-blue-dark: #12305c; --a11y-focus: #f5a623; } /* ------------------------------------------------------------------ 1. Grundlagen ------------------------------------------------------------------ */ /* Nur für Screenreader, optisch nicht sichtbar. */ .a11y-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Sprungmarke zum Inhalt: erstes Element im Dokument, sichtbar sobald sie den Tastaturfokus bekommt. Damit überspringt man Kopfbereich und Navigation. */ .a11y-skip-link { position: fixed; top: 10px; left: 10px; z-index: 10001; padding: 12px 20px; background: var(--a11y-blue-dark); color: #fff !important; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none !important; border-radius: 6px; box-shadow: 0 2px 12px rgba(0, 0, 0, .45); transform: translateY(calc(-100% - 20px)); transition: transform .15s ease-out; } .a11y-skip-link:focus { transform: translateY(0); } /* Sichtbarer Tastaturfokus auf der ganzen Seite. Das Helix-Template blendet den Fokusrahmen an vielen Stellen aus. Gelb mit dunklem Rand ist auf hellem wie auf dunklem Untergrund erkennbar. */ :focus-visible { outline: 3px solid var(--a11y-focus) !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px rgba(0, 0, 0, .45) !important; } /* Der Inhaltsbereich bekommt den Fokus nur per Sprungmarke, ohne Rahmen. */ main#site-component:focus { outline: none; } /* Die Aufklapper (.c-dropdown) und Hinweise (.c-hint) aus den importierten Inhalten reagierten nur auf Maus. Sie bekommen in a11y.js Tastaturbedienung; hier der passende Zeiger und der Zustand für Touch- und Tastaturbedienung. */ .c-dropdown .c-dropdown-header:focus-visible { outline-offset: -3px !important; } .c-hint:focus-visible .c-hint-content, .c-hint.active .c-hint-content { display: block; } @media print { .a11y-skip-link, .a11y-rail, .a11y-panel { display: none !important; } } /* ------------------------------------------------------------------ 2. Bedienleiste ------------------------------------------------------------------ */ /* Ohne JavaScript lässt sich nichts umschalten, dann bleibt die Leiste weg. */ html:not(.a11y-ready) .a11y-rail { display: none; } /* Die Leiste trägt die Schaltflächen, die überall erreichbar bleiben sollen: die Barrierefreiheit und – sobald cookieconsent sie erzeugt hat – der Datenschutz. Beide sind gewöhnliche Flex-Elemente darin; liegt nur eine davon vor, steht sie allein in der Mitte, ohne Lücke daneben. Auf breiten Bildschirmen klebt sie senkrecht am linken Fensterrand. Dort ist links vom Inhalt Platz, in der Kopfleiste dagegen nicht: Ab 992 px tritt an die Stelle des Hamburger-Symbols die ausgeschriebene Navigation, und knapp über dieser Grenze reicht sie bis dicht an den linken Rand. Wie es darunter aussieht, steht im Block für schmale Geräte weiter unten. Das Panel steht bewusst neben der Leiste und nicht darin: Es liegt fest am Fenster (position: fixed) und würde sich sonst an der verschobenen Leiste ausrichten statt am Fensterrand. */ .a11y-rail { position: fixed; top: 50%; left: 0; z-index: 9998; display: flex; flex-direction: column; gap: 6px; transform: translateY(-50%); } .a11y-toggle, .a11y-rail .cc-revoke { /* Am Fensterrand klebt die Leiste, nicht die einzelne Schaltfläche. */ position: static; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 64px; min-height: 44px; padding: 9px 5px; border: 2px solid #fff; border-left: 0; border-radius: 0 10px 10px 0; font-family: Verdana, Tahoma, sans-serif; font-size: 10px; font-weight: 700; line-height: 1.15; text-align: center; letter-spacing: .02em; text-transform: uppercase; /* "Barrierefreiheit" passt nur getrennt in die schmale Leiste. */ hyphens: auto; overflow-wrap: break-word; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); } .a11y-toggle svg, .a11y-rail .cc-revoke svg { display: block; width: 30px; height: 30px; fill: currentColor; } .a11y-toggle { background: var(--a11y-blue); color: #fff; } .a11y-toggle:hover, .a11y-toggle:focus, html.a11y-open .a11y-toggle { background: var(--a11y-blue-dark); color: #fff; } /* Datenschutz-Schaltfläche cookieconsent stellt sie erst auf, wenn eine Entscheidung vorliegt, und hängt sie an den Anfang des ; in die Leiste holt sie partials/tracking.html.twig. Die Farben aus der Palette schreibt das Skript zur Laufzeit in ein eigenes