/*
 * hw-a11y.css - Stil des Barrierefreiheits-Menues (hallo-webseite.de, Lagom2). Wird vom Hook hw_accessibility.php
 * im <head> eingebunden (<link id="hw-a11y-css" ... ?v=filemtime>). Teil 1 = bestehende Regeln, Teil 2 = NEU 2026-10
 * (Filter-Komposition, Sprachausgabe, Farbfehlsichtigkeit).
 * Gegenueber der frueheren Inline-Fassung bewusst geaendert (Kontrast, WCAG 2.2 AA):
 *  - AA: --hw-accent war #25a75b, weisser Text darauf nur 3,1:1 -> auf 78 % abgedunkelt (folgt weiter --btn-primary-bg).
 *  - AA: Erklaerungs-Link #009aff auf Weiss nur 3,0:1 -> --hw-link (hell #0050d9, dunkel #4db3ff).
 *  - AA: Fokusring #ffb300 auf hellem Panel nur 1,9:1 -> --hw-focus (hell #0b4fb8, dunkel #ffb300).
 */

/* Seiteninhalt = alles außer dem Menü */
html[data-hw-a11y-font="115"] body>*:not(#hw-a11y){zoom:1.15}
html[data-hw-a11y-font="130"] body>*:not(#hw-a11y){zoom:1.3}
html[data-hw-a11y-font="150"] body>*:not(#hw-a11y){zoom:1.5}
html[data-hw-a11y-spacing="on"] body>*:not(#hw-a11y) *{line-height:1.8!important;letter-spacing:.05em!important;word-spacing:.12em!important}
html[data-hw-a11y-readable="on"] body>*:not(#hw-a11y) *:not(i):not([class*="icon"]):not([class*="fa-"]):not([class*="ls-"]){font-family:Verdana,Tahoma,"Segoe UI",Arial,sans-serif!important}
html[data-hw-a11y-contrast="on"] body>*:not(#hw-a11y){filter:contrast(1.35) saturate(1.15)}
html[data-hw-a11y-gray="on"] body>*:not(#hw-a11y){filter:grayscale(1)}
html[data-hw-a11y-contrast="on"][data-hw-a11y-gray="on"] body>*:not(#hw-a11y){filter:grayscale(1) contrast(1.35)}
html[data-hw-a11y-links="on"] body>*:not(#hw-a11y) a{text-decoration:underline!important;text-underline-offset:3px;text-decoration-thickness:2px!important}
html[data-hw-a11y-links="on"] body>*:not(#hw-a11y) a:hover{outline:2px solid currentColor;outline-offset:2px}
html[data-hw-a11y-focus="on"] *:focus-visible,html[data-hw-a11y-focus="on"] *:focus{outline:3px solid #ffb300!important;outline-offset:2px!important;box-shadow:0 0 0 6px rgba(255,179,0,.35)!important}
html[data-hw-a11y-motion="off"] *,html[data-hw-a11y-motion="off"] *::before,html[data-hw-a11y-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-hw-a11y-cursor="on"],html[data-hw-a11y-cursor="on"] *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.5L9 19z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 4 2,auto!important}
#hw-a11y-guide{position:fixed;left:0;right:0;height:44px;pointer-events:none;z-index:2147483000;display:none;
 background:rgba(255,255,255,.04);box-shadow:0 0 0 100vmax rgba(0,0,0,.45);border-top:2px solid #ffb300;border-bottom:2px solid #ffb300}
html[data-hw-a11y-guide="on"] #hw-a11y-guide{display:block}

/* ---- Menü im Lagom2-Stil ---- */
#hw-a11y{--hw-accent:#1d8247;--hw-accent:color-mix(in srgb,var(--btn-primary-bg,#25a75b) 78%,#000);--hw-focus:#0b4fb8;--hw-link:#0050d9;--hw-accent-2:var(--brand-primary,#009aff);--hw-bg:#fff;--hw-fg:#1f2533;--hw-muted:#5b6475;--hw-line:#e6e9f0;--hw-tile:#f5f7fb;
 font-family:inherit;font-size:14px;line-height:1.45;color:var(--hw-fg)}
html.lagom-dark-mode #hw-a11y{--hw-focus:#ffb300;--hw-link:#4db3ff;--hw-bg:#1b2130;--hw-fg:#eef1f7;--hw-muted:#a9b1c3;--hw-line:#2c3446;--hw-tile:#242b3c}
#hw-a11y-toggle{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:2147483600;width:48px;height:52px;border:0;
 border-radius:12px 0 0 12px;background:var(--hw-accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
 box-shadow:0 6px 18px rgba(16,24,40,.22);transition:width .15s ease}
#hw-a11y-toggle:hover{width:54px}
#hw-a11y-toggle:focus-visible{outline:3px solid var(--hw-focus);outline-offset:2px}
#hw-a11y-toggle svg{width:28px;height:28px}
#hw-a11y-panel{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);z-index:2147483640;background:var(--hw-bg);
 box-shadow:-12px 0 40px rgba(16,24,40,.25);transform:translateX(105%);transition:transform .22s ease;display:flex;flex-direction:column}
#hw-a11y.is-open #hw-a11y-panel{transform:translateX(0)}
html[data-hw-a11y-motion="off"] #hw-a11y-panel{transition:none}
#hw-a11y-backdrop{position:fixed;inset:0;z-index:2147483620;background:rgba(10,14,24,.35);display:none}
#hw-a11y.is-open #hw-a11y-backdrop{display:block}
.hw-a11y-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--hw-line)}
.hw-a11y-head-icon{width:38px;height:38px;border-radius:10px;background:var(--hw-accent);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.hw-a11y-head-icon svg{width:22px;height:22px}
.hw-a11y-head h2{margin:0;font-size:17px;font-weight:700;color:var(--hw-fg)}
.hw-a11y-head p{margin:2px 0 0;font-size:12.5px;color:var(--hw-muted)}
.hw-a11y-close{margin-left:auto;width:36px;height:36px;border-radius:9px;border:1px solid var(--hw-line);background:transparent;color:var(--hw-fg);cursor:pointer;font-size:20px;line-height:1}
.hw-a11y-close:focus-visible,.hw-a11y-tile:focus-visible,.hw-a11y-seg button:focus-visible,.hw-a11y-reset:focus-visible{outline:3px solid var(--hw-focus);outline-offset:2px}
.hw-a11y-body{padding:16px 20px;overflow-y:auto;flex:1}
.hw-a11y-label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--hw-muted);margin:4px 0 8px}
.hw-a11y-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:16px}
.hw-a11y-seg button{border:1px solid var(--hw-line);background:var(--hw-tile);color:var(--hw-fg);border-radius:9px;padding:9px 0;font-weight:600;cursor:pointer}
.hw-a11y-seg button[aria-pressed="true"]{background:var(--hw-accent);border-color:var(--hw-accent);color:#fff}
.hw-a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hw-a11y-tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;border:1px solid var(--hw-line);background:var(--hw-tile);
 color:var(--hw-fg);border-radius:12px;padding:12px;cursor:pointer;min-height:84px;position:relative}
.hw-a11y-tile svg{width:22px;height:22px;color:var(--hw-accent-2)}
.hw-a11y-tile strong{font-size:13.5px;font-weight:600}
.hw-a11y-tile span{font-size:11.5px;color:var(--hw-muted)}
.hw-a11y-tile[aria-pressed="true"]{border-color:var(--hw-accent);box-shadow:inset 0 0 0 1px var(--hw-accent)}
.hw-a11y-tile[aria-pressed="true"]::after{content:"✓";position:absolute;top:8px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--hw-accent);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.hw-a11y-foot{padding:14px 20px;border-top:1px solid var(--hw-line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hw-a11y-reset{border:1px solid var(--hw-line);background:transparent;color:var(--hw-fg);border-radius:9px;padding:8px 12px;font-weight:600;cursor:pointer}
.hw-a11y-foot a{margin-left:auto;color:var(--hw-link);font-weight:600;font-size:13px;text-decoration:none}
.hw-a11y-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:575px){#hw-a11y-toggle{width:42px;height:46px;top:auto;bottom:96px;transform:none}#hw-a11y-toggle svg{width:24px;height:24px}}
@media print{#hw-a11y,#hw-a11y-guide{display:none!important}}
/* =====================================================================================================
   NEU 2026-10 Teil 2
   ===================================================================================================== */
#hw-a11y [hidden]{display:none!important}

/* ---- Filter-Komposition: Farbfehlsichtigkeit + Kontrast/Graustufen auf DEMSELBEN Element ----
   Ein CSS-Filter erzeugt einen neuen Containing Block fuer position:fixed/sticky-Nachfahren. Der Lagom-Kopf
   (<header> > .app-nav.sticky-navigation) wird beim Hochscrollen position:fixed gesetzt; mit Filter auf <header>
   waere das Menue dann am Header "festgeklebt" und scrollte weg. Darum bekommt der Header den Filter NICHT selbst,
   sondern seine Kinder (body>header>*): .app-nav ist dann selbst das gefilterte Element, sein eigenes position:fixed
   bleibt intakt. (Gilt fuer die alten Filter Kontrast/Graustufen genauso.) !important, weil die bestehenden Regeln
   oben per :not(#hw-a11y) hoehere Spezifitaet haben. */
html:is([data-hw-a11y-cvd="protan"],[data-hw-a11y-cvd="deuter"],[data-hw-a11y-cvd="tritan"],[data-hw-a11y-contrast="on"],[data-hw-a11y-gray="on"]) body>header:not(#hw-a11y){filter:none!important}
html[data-hw-a11y-cvd="protan"]{--hw-cvd:url(#hw-cvd-protan)}
html[data-hw-a11y-cvd="deuter"]{--hw-cvd:url(#hw-cvd-deuter)}
html[data-hw-a11y-cvd="tritan"]{--hw-cvd:url(#hw-cvd-tritan)}
/* nur Kontrast / nur Graustufen / beides: Header-Kinder (gleiche Werte wie die bestehenden Regeln) */
html[data-hw-a11y-contrast="on"]:not([data-hw-a11y-gray="on"]) body>header>*{filter:contrast(1.35) saturate(1.15)}
html[data-hw-a11y-gray="on"]:not([data-hw-a11y-contrast="on"]) body>header>*{filter:grayscale(1)}
html[data-hw-a11y-contrast="on"][data-hw-a11y-gray="on"] body>header>*{filter:grayscale(1) contrast(1.35)}
/* Farbkorrektur allein */
html:is([data-hw-a11y-cvd="protan"],[data-hw-a11y-cvd="deuter"],[data-hw-a11y-cvd="tritan"]) body>*:not(#hw-a11y):not(header),
html:is([data-hw-a11y-cvd="protan"],[data-hw-a11y-cvd="deuter"],[data-hw-a11y-cvd="tritan"]) body>header>*{filter:var(--hw-cvd)}
/* Farbkorrektur zuerst, danach wie bisher (Reihenfolge: Korrektur auf Originalfarben, dann Kontrast/Grau) */
html:is([data-hw-a11y-cvd="protan"],[data-hw-a11y-cvd="deuter"],[data-hw-a11y-cvd="tritan"])[data-hw-a11y-contrast="on"]:not([data-hw-a11y-gray="on"]) body>*:not(#hw-a11y):not(header),
html:is([data-hw-a11y-cvd="protan"],[data-hw-a11y-cvd="deuter"],[data-hw-a11y-cvd="tritan"])[data-hw-a11y-contrast="on"]:not([data-hw-a11y-gray="on"]) body>header>*{filter:var(--hw-cvd) contrast(1.35) saturate(1.15)}
html:is([data-hw-a11y-cvd="protan"],[data-hw-a11y-cvd="deuter"],[data-hw-a11y-cvd="tritan"])[data-hw-a11y-gray="on"]:not([data-hw-a11y-contrast="on"]) body>*:not(#hw-a11y):not(header),
html:is([data-hw-a11y-cvd="protan"],[data-hw-a11y-cvd="deuter"],[data-hw-a11y-cvd="tritan"])[data-hw-a11y-gray="on"]:not([data-hw-a11y-contrast="on"]) body>header>*{filter:var(--hw-cvd) grayscale(1)}
html:is([data-hw-a11y-cvd="protan"],[data-hw-a11y-cvd="deuter"],[data-hw-a11y-cvd="tritan"])[data-hw-a11y-contrast="on"][data-hw-a11y-gray="on"] body>*:not(#hw-a11y):not(header),
html:is([data-hw-a11y-cvd="protan"],[data-hw-a11y-cvd="deuter"],[data-hw-a11y-cvd="tritan"])[data-hw-a11y-contrast="on"][data-hw-a11y-gray="on"] body>header>*{filter:var(--hw-cvd) grayscale(1) contrast(1.35)}
/* Die unsichtbare SVG-Definition (width/height 0): NICHT display:none (dann ignorieren Firefox/Safari die Filter) */
#hw-a11y-cvd-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* ---- Bereiche im Panel ---- */
.hw-a11y-sec{margin:0 0 16px}
.hw-a11y-note{margin:0 0 10px;font-size:12.5px;color:var(--hw-muted)}
.hw-a11y-speech-row{display:flex;gap:8px;margin-bottom:12px}
.hw-a11y-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--hw-line);background:var(--hw-tile);color:var(--hw-fg);
 border-radius:10px;min-height:44px;padding:0 14px;font-weight:600;font-size:14px;cursor:pointer}
.hw-a11y-btn svg{width:20px;height:20px;flex:none}
.hw-a11y-btn-main{flex:1;min-width:0;background:var(--hw-accent);border-color:var(--hw-accent);color:#fff}
.hw-a11y-btn-icon{width:44px;padding:0;flex:none}
.hw-a11y-btn:disabled{opacity:.55;cursor:default}
.hw-a11y-foot a:focus-visible,.hw-a11y-btn:focus-visible,.hw-a11y-opt:focus-visible,.hw-a11y-pl-btn:focus-visible{outline:3px solid var(--hw-focus);outline-offset:2px}
.hw-a11y-pl-resume{display:none}
#hw-a11y.is-paused .hw-a11y-pl-resume{display:block}
#hw-a11y.is-paused .hw-a11y-pl-pause{display:none}
.hw-a11y-tile-wide{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;gap:10px;padding-right:38px}
.hw-a11y-tile-wide .hw-a11y-txt{display:flex;flex-direction:column;gap:2px}
/* der Wrapper traegt sonst via ".hw-a11y-tile span" die gedaempfte Farbe/Groesse auch fuer die Ueberschrift */
.hw-a11y-tile .hw-a11y-txt{color:var(--hw-fg);font-size:13.5px}
.hw-a11y-tile .hw-a11y-txt span{color:var(--hw-muted);font-size:11.5px}
.hw-a11y-opts{display:grid;gap:6px;margin-bottom:16px}
.hw-a11y-opt{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1px;border:1px solid var(--hw-line);background:var(--hw-tile);color:var(--hw-fg);
 border-radius:10px;padding:9px 12px;cursor:pointer;position:relative}
.hw-a11y-opt strong{font-size:13.5px;font-weight:600}
.hw-a11y-opt span{font-size:11.5px;color:var(--hw-muted)}
.hw-a11y-opt[aria-pressed="true"]{border-color:var(--hw-accent);box-shadow:inset 0 0 0 1px var(--hw-accent)}
.hw-a11y-opt[aria-pressed="true"]::after{content:"\2713";position:absolute;top:50%;right:10px;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:var(--hw-accent);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}

/* ---- Mini-Player (unten mittig). z-index: ueber Seite/Cookie/Chat (Lagom max 99999), unter dem Panel (…640). ---- */
#hw-a11y-player{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:2147483630;display:none;align-items:center;gap:6px;
 background:var(--hw-bg);color:var(--hw-fg);border:1px solid var(--hw-line);border-radius:999px;padding:5px 6px 5px 16px;box-shadow:0 8px 28px rgba(16,24,40,.28);
 font-size:14px;font-weight:600;white-space:nowrap;max-width:calc(100vw - 32px)}
#hw-a11y.is-reading #hw-a11y-player{display:flex}
.hw-a11y-pl-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--hw-line);background:var(--hw-tile);color:var(--hw-fg);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.hw-a11y-pl-btn svg{width:18px;height:18px}
.hw-a11y-pl-btn .hw-a11y-pl-resume,.hw-a11y-pl-btn .hw-a11y-pl-pause{width:18px;height:18px}

/* ---- Hervorhebung des gerade gelesenen Blocks. Outline >= 3:1 gegen hellen UND dunklen Seitengrund. ---- */
.hw-a11y-reading{outline:3px solid #0b4fb8!important;outline-offset:3px!important;box-shadow:inset 0 0 0 9999px rgba(11,79,184,.10)!important;border-radius:3px}
html.lagom-dark-mode .hw-a11y-reading{outline-color:#ffb300!important;box-shadow:inset 0 0 0 9999px rgba(255,179,0,.16)!important}
/* ---- Kompaktlayout (14.10.2026, Wunsch Enrico: Panel ohne Scrollen). Alle Regeln darueber bleiben die Grundlage; hier nur
   Abstaende/Groessen. Die Beschreibungstexte unter den Kacheln bleiben fuer Screenreader erhalten (visuell versteckt, nicht
   display:none) und stehen zusaetzlich als title-Tooltip. Mindestgroesse der Ziele bleibt >= 24 px (WCAG 2.2 AA). ---- */
.hw-a11y-head{padding:10px 14px;gap:10px}
.hw-a11y-head-icon{width:30px;height:30px;border-radius:8px}
.hw-a11y-head-icon svg{width:18px;height:18px}
.hw-a11y-head h2{font-size:15px}
.hw-a11y-head p{margin:1px 0 0;font-size:11.5px;line-height:1.25}
.hw-a11y-body{padding:8px 14px 10px}
.hw-a11y-label{font-size:11px;margin:2px 0 5px}
.hw-a11y-sec{margin:0 0 8px}
.hw-a11y-seg{gap:5px;margin-bottom:8px}
.hw-a11y-seg button{padding:5px 0;font-size:13px;min-height:30px}
.hw-a11y-speech-row{gap:6px;margin-bottom:6px}
.hw-a11y-btn{min-height:36px;font-size:13.5px;padding:0 10px;border-radius:9px}
.hw-a11y-btn svg{width:18px;height:18px}
.hw-a11y-btn-icon{width:36px}
.hw-a11y-grid{grid-template-columns:repeat(3,1fr);gap:6px}
.hw-a11y-tile{gap:3px;padding:7px 8px;min-height:0;border-radius:10px}
.hw-a11y-tile svg{width:18px;height:18px}
.hw-a11y-tile strong,.hw-a11y-tile .hw-a11y-txt{font-size:12px;line-height:1.2}
.hw-a11y-tile[aria-pressed="true"]::after{top:5px;right:6px;width:16px;height:16px;font-size:10px}
.hw-a11y-tile span:not(.hw-a11y-txt),.hw-a11y-tile .hw-a11y-txt span,.hw-a11y-opt span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px}
.hw-a11y-tile-wide{padding:6px 34px 6px 10px;gap:8px;margin-bottom:6px}
.hw-a11y-tile-wide svg{flex:none}
.hw-a11y-note{margin:0 0 6px;font-size:11.5px;line-height:1.3}
.hw-a11y-opts{grid-template-columns:1fr 1fr;gap:5px;margin-bottom:6px}
.hw-a11y-opt{padding:6px 28px 6px 10px;border-radius:9px;min-height:30px;justify-content:center}
.hw-a11y-opt strong{font-size:12px;line-height:1.2}
.hw-a11y-opt[aria-pressed="true"]::after{right:6px;width:16px;height:16px;font-size:10px}
.hw-a11y-foot{padding:8px 14px;gap:8px}
/* Niedrige Fenster (z. B. 13-Zoll-Laptop mit Browserleisten): noch eine Stufe kompakter, damit auch dort nichts scrollt */
@media (max-height:780px){.hw-a11y-head p{display:none}.hw-a11y-head{padding:8px 14px}.hw-a11y-note{display:none}.hw-a11y-label{margin:0 0 4px}.hw-a11y-sec{margin-bottom:6px}.hw-a11y-seg{margin-bottom:6px}.hw-a11y-tile{padding:5px 8px}.hw-a11y-opt{padding-top:4px;padding-bottom:4px}}
@media (max-height:660px){.hw-a11y-tile .hw-a11y-txt,.hw-a11y-tile strong{font-size:11.5px}.hw-a11y-tile svg{display:none}.hw-a11y-foot{padding:6px 14px}}
@media (prefers-reduced-motion:reduce){#hw-a11y-panel,#hw-a11y-toggle{transition:none}}
@media (max-width:575px){#hw-a11y-player{bottom:12px;padding-left:12px}}
@media print{#hw-a11y-player{display:none!important}}