Accessibility in Kopfzeilen integrieren und Kategorien angleichen

CHANGELOG.md

@@ -23,6 +23,11 @@ Docker/CI-Härtung und erste Tests.
   „Lesemodus (Dyslexie)“ und weist auf Verdana plus vergrößerte Abstände hin.
 - Der dauerhaft erreichbare Auslöser besitzt nun reservierten Layoutplatz statt Spielkarten oder
   Formulare zu überdecken: seitlich auf Desktop und in einer unteren Schutzzone auf kleinen Displays.
+- Accessibility-Zugriff in die jeweilige sticky Kopfzeile neben Theme/Logout verschoben; Seiten
+  ohne Werkzeugleiste erhalten eine eigene reservierte Utility-Zeile statt eines Inhalts-Overlays.
+- SystemEscape behält seine Terminal-Typografie im Spiel, verwendet für globale Navigation und
+  Werkzeuge aber die einheitliche Mindflux-Sans-Serif-Schrift.
+- TechTacular-Kategoriekarten auf identische Höhe gesetzt und zweizeilige Titel mittig ausgerichtet.
 - Das Panel besitzt Dialogsemantik, sichtbaren Tastaturfokus, Escape-Schließen und verständliche
   Aktivzustände; Spielzustände oder Benutzerkonten werden dabei nicht verändert.
 - **DevLab-Spielansicht nutzt große Bildschirme aus:** Die bisherige starre Begrenzung auf

src/main/resources/static/css/accessibility-placement.css

@@ -0,0 +1,7 @@
+body{padding-left:0!important;padding-bottom:0!important}
+.mf-a11y-trigger{position:static!important;width:44px;height:44px;z-index:auto;flex:0 0 44px;box-shadow:0 0 14px var(--glow-w);border-radius:12px}
+.mf-a11y-trigger svg{width:25px;height:25px}
+.mf-a11y-panel{inset:76px 16px auto auto!important;width:min(450px,calc(100vw - 32px));max-height:calc(100dvh - 92px)}
+.mf-a11y-utility{position:sticky;top:0;z-index:1700;min-height:60px;display:flex;align-items:center;justify-content:flex-end;padding:.5rem 1rem;background:var(--panel);border-bottom:1px solid var(--border)}
+.mf-theme-float{display:flex;align-items:center;gap:.55rem}
+@media(max-width:700px){.mf-a11y-panel{inset:70px 6px auto 6px!important;width:auto;max-height:calc(100dvh - 82px)}.mf-a11y-trigger{width:42px;height:42px;flex-basis:42px}}

src/main/resources/static/css/codeescape-global.css

@@ -0,0 +1 @@
+.esc-global-tools{justify-self:end;display:flex;align-items:center;gap:.65rem}.mf-a11y-host{display:flex}.esc-back,.esc-timer{font-family:"Inter","Segoe UI",system-ui,sans-serif}.esc-back{font-weight:600}

src/main/resources/static/css/techtacular.css

@@ -136,7 +136,8 @@ body.tt-body {
 }
 
 .tt-cat-title {
-  flex: 0 0 auto;
+  flex: 0 0 3.5rem;
+  min-height: 3.5rem;
   display: flex;
   align-items: center;
   justify-content: center;

src/main/resources/static/js/accessibility.js

@@ -6,5 +6,6 @@ function button(id,icon,label,detail){return '<button type="button" class="mf-a1
 function init(){if(document.querySelector('.mf-a11y-trigger'))return;var trigger=document.createElement('button');trigger.type='button';trigger.className='mf-a11y-trigger';trigger.setAttribute('aria-label','Barrierefreiheit öffnen');trigger.setAttribute('aria-expanded','false');trigger.setAttribute('aria-controls','mf-a11y-panel');trigger.innerHTML='<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><circle cx="18" cy="5" r="3" fill="currentColor"/><path d="M13 11l5-2 5 4m-7-2-2 7-6 1m8-4 6 2 3 7M13 18a7 7 0 1 0 6 7"/></svg>';
 var panel=document.createElement('section');panel.id='mf-a11y-panel';panel.className='mf-a11y-panel';panel.hidden=true;panel.setAttribute('role','dialog');panel.setAttribute('aria-modal','false');panel.setAttribute('aria-labelledby','mf-a11y-title');panel.innerHTML='<div class="mf-a11y-head"><button type="button" class="mf-a11y-close" aria-label="Barrierefreiheit schließen">×</button><h2 id="mf-a11y-title">Barrierefreiheit</h2></div><div class="mf-a11y-grid">'+button('font','T⁺','Text vergrößern','100 %')+button('contrast','◐','Hochkontrast')+button('color','◉','Farbenblind-Modus')+button('mono','◒','Monochrom')+button('readable','Aa','Lesemodus (Dyslexie)','Verdana + Abstände')+button('links','🔗','Links unterstreichen')+button('motion','Ⅱ','Animationen stoppen')+button('cursor','➤','Großer Cursor')+button('reset','↺','Alles zurücksetzen')+'</div>';
 document.body.appendChild(trigger);document.body.appendChild(panel);var close=panel.querySelector('.mf-a11y-close');function paint(){panel.querySelectorAll('[data-a11y]').forEach(function(b){var id=b.dataset.a11y,on=id==='font'?state.font>100:id==='motion'?!state.motion:id==='reset'?false:!!state[id];b.setAttribute('aria-pressed',on);if(id==='font')b.querySelector('small').textContent=state.font+' %';});}
+var host=document.querySelector('.mf-a11y-host,.mf-tools,.tt-header-tools,.mm-header-tools,.ss-header-tools,.dlg-header-tools,.mf-theme-float');if(host){host.insertBefore(trigger,host.firstChild);}else{var utility=document.createElement('div');utility.className='mf-a11y-utility';utility.setAttribute('aria-label','Globale Werkzeuge');utility.appendChild(trigger);document.body.insertBefore(utility,document.body.firstChild);}
 function hide(){panel.hidden=true;trigger.setAttribute('aria-expanded','false');trigger.focus();}function show(){panel.hidden=false;trigger.setAttribute('aria-expanded','true');paint();close.focus();}trigger.addEventListener('click',function(){panel.hidden?show():hide();});close.addEventListener('click',hide);window.addEventListener('keydown',function(e){if(e.key==='Escape'&&!panel.hidden)hide();});panel.addEventListener('click',function(e){var b=e.target.closest('[data-a11y]');if(!b)return;var id=b.dataset.a11y;if(id==='reset')state=Object.assign({},defaults);else if(id==='font')state.font=levels[(levels.indexOf(state.font)+1)%levels.length];else if(id==='motion')state.motion=!state.motion;else state[id]=!state[id];apply();paint();});paint();}
 if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init();})();

src/main/resources/static/js/theme.js

@@ -30,10 +30,15 @@
     accessibilityCss.href = '/css/accessibility.css?v=3';
     accessibilityCss.setAttribute('data-accessibility', '');
     document.head.appendChild(accessibilityCss);
+    var accessibilityPlacementCss = document.createElement('link');
+    accessibilityPlacementCss.rel = 'stylesheet';
+    accessibilityPlacementCss.href = '/css/accessibility-placement.css?v=1';
+    accessibilityPlacementCss.setAttribute('data-accessibility', '');
+    document.head.appendChild(accessibilityPlacementCss);
   }
   if (!document.querySelector('script[data-accessibility]')) {
     var accessibilityScript = document.createElement('script');
-    accessibilityScript.src = '/js/accessibility.js?v=3';
+    accessibilityScript.src = '/js/accessibility.js?v=4';
     accessibilityScript.defer = true;
     accessibilityScript.setAttribute('data-accessibility', '');
     document.head.appendChild(accessibilityScript);

src/main/resources/templates/codeescape.html

@@ -1 +1 @@
-<!doctype html><html lang="de" data-theme="dark" xmlns:th="http://www.thymeleaf.org"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SystemEscape · Mindflux</title><link rel="stylesheet" href="/css/theme.css"><link rel="stylesheet" href="/css/codeescape.css?v=2"><link rel="stylesheet" href="/css/codeescape-guide.css?v=2"><script src="/js/theme.js"></script></head><body><main class="esc-app"><header class="esc-top"><a href="/dashboard" class="esc-back">← Dashboard</a><div class="esc-brand"><b>SYSTEMESCAPE</b><span>FACILITY ACCESS PROTOCOL</span></div><div class="esc-timer" id="escTimer">--:--</div></header><section id="escView" class="esc-view"><div class="esc-loading">FACILITY WIRD INITIALISIERT …</div></section></main><script src="/js/codeescape.js?v=2"></script></body></html>
+<!doctype html><html lang="de" data-theme="dark" xmlns:th="http://www.thymeleaf.org"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SystemEscape · Mindflux</title><link rel="stylesheet" href="/css/theme.css"><link rel="stylesheet" href="/css/codeescape.css?v=2"><link rel="stylesheet" href="/css/codeescape-guide.css?v=3"><link rel="stylesheet" href="/css/codeescape-global.css?v=1"><script src="/js/theme.js"></script></head><body><main class="esc-app"><header class="esc-top"><a href="/dashboard" class="esc-back">← Dashboard</a><div class="esc-brand"><b>SYSTEMESCAPE</b><span>FACILITY ACCESS PROTOCOL</span></div><div class="esc-global-tools"><span class="mf-a11y-host"></span><div class="esc-timer" id="escTimer">--:--</div></div></header><section id="escView" class="esc-view"><div class="esc-loading">FACILITY WIRD INITIALISIERT …</div></section></main><script src="/js/codeescape.js?v=2"></script></body></html>