/* AK86 2026 – Barrierefreiheit: Sprunglink, Menü und was die Einstellungen an der Seite ändern (hilfe.js). */

/* Der Inhalt: <main> zählt für Vorlesen und Sprünge, am Aufbau der Seite ändert es nichts */
main { display: contents; }
.hi-ziel:focus { outline: none; }
.hi-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Sprunglink: Taucht beim ersten Tab auf */
.hi-sprung { position: fixed; left: 12px; top: 12px; z-index: 130; padding: 12px 16px; font: 700 15px/1.2 var(--f-body); color: #fff; text-decoration: none; background: #080809; border: 2px solid #fff; transform: translateY(-300%); }
.hi-sprung:focus { transform: none; outline: 2px solid #50BBB8; outline-offset: 2px; }

/* Tab: Links im Inhalt bleiben erreichbar, auch wenn sie noch nicht eingeblendet sind oder in einer Station liegen, die gerade nicht im Bild ist */
html.hi-tab main :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):not(.al-p *) { visibility: visible !important; } /* .al-p: Wechselt über die eigenen Reiter, nur der offene zählt */
html.hi-tab .chap:focus-within, html.hi-tab .logo-vars:focus-within { opacity: 1 !important; visibility: visible !important; pointer-events: auto; }
html.hi-tab main .wpcf7-list-item:has(input:focus-visible) .wpcf7-list-item-label { outline: 2px solid var(--static-seccolor); outline-offset: 2px; }

/* Knopf in der Kopfzeile, liegt in der Navigation wie der Hell/Dunkel-Schalter */
.hilfe-knopf { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--static-white); cursor: pointer; opacity: .82; transition: opacity .2s; }
.hilfe-knopf:hover, .hilfe-knopf[aria-expanded="true"] { opacity: 1; }
html.lightmode .hilfe-knopf { color: var(--textcolor); }
html.hi-eingestellt .hilfe-knopf::after { content: ''; position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; background: #50BBB8; }
html.lightmode.hi-eingestellt .hilfe-knopf::after { background: #BA1424; }
body.mnu-in .nav .hilfe-knopf { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .mode-btn + .hilfe-knopf { margin-left: 0; } }

/* Menü: immer dunkel wie die Konsole */
.hi { position: fixed; z-index: 99; right: clamp(10px, 1.6vw, 28px); top: clamp(76px, 9vh, 96px); box-sizing: border-box; width: min(470px, calc(100vw - 20px)); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); padding: clamp(16px, 1.6vw, 24px); overflow-y: auto; overscroll-behavior: contain; font: 400 15px/1.45 var(--f-body); color: #fff; background-color: rgba(8, 8, 9, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .22); outline: none; }
.hi[hidden] { display: none; }
.hi :focus-visible { outline: 2px solid #50BBB8; outline-offset: 2px; }
.hi-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hi-titel { margin: 0; font: 800 clamp(20px, 1.6vw, 24px)/1.1 var(--f-display, var(--f-body)); color: #fff; }
.hi-x { position: relative; flex: none; width: 36px; height: 36px; margin: -4px -6px -4px 0; padding: 0; color: #fff; background: none; border: 0; cursor: pointer; }
.hi-x i { position: absolute; left: 8px; right: 8px; top: 17px; height: 2px; background: currentColor; transform: rotate(45deg); }
.hi-x i + i { transform: rotate(-45deg); }
.hi-text { margin: 8px 0 0; color: rgba(255, 255, 255, .78); }
.hi-h { margin: 20px 0 6px; font: 500 12px/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: #7fe3df; }

.hi-gruppe { border-top: 1px solid rgba(255, 255, 255, .16); }
.hi-schalter { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 9px 0; font: inherit; color: #fff; text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); cursor: pointer; }
.hi-s-text b { display: block; font-weight: 700; }
.hi-s-text small { display: block; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .68); }
.hi-s-bau { position: relative; flex: none; width: 40px; height: 22px; border: 1px solid rgba(255, 255, 255, .6); transition: background-color .18s, border-color .18s; }
.hi-s-bau i { position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; background: #fff; transition: transform .18s; }
.hi-schalter[aria-checked="true"] .hi-s-bau { background-color: #50BBB8; border-color: #50BBB8; }
.hi-schalter[aria-checked="true"] .hi-s-bau i { background: #080809; transform: translateX(18px); }

.hi-schrift { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hi-schrift button { padding: 9px 6px; font: 700 14px/1.2 var(--f-body); color: #fff; background: none; border: 1px solid rgba(255, 255, 255, .4); cursor: pointer; }
.hi-schrift button[aria-pressed="true"] { color: #080809; background: #fff; border-color: #fff; }

.hi-tasten { margin: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.hi-tasten > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.hi-tasten dt { margin: 0; line-height: 1.9; }
.hi-tasten dd { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .78); }
.hi kbd { display: inline-block; min-width: 1.5em; padding: 1px 5px; font: 500 12px/1.4 var(--f-mono); color: #fff; text-align: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .4); }
.hi-zurueck { display: block; margin: 16px 0 0; padding: 4px 0; font: 700 14px/1.3 var(--f-body); color: #7fe3df; text-decoration: underline; text-underline-offset: .2em; background: none; border: 0; cursor: pointer; }
.hi-zurueck[hidden] { display: none; }
@media (max-width: 520px) {
  .hi { top: 76px; right: 10px; max-height: calc(100vh - 86px); max-height: calc(100dvh - 86px); }
  .hi-tasten > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Links markieren */
html { --hi-mark: #7fe3df; }
html.lightmode { --hi-mark: #BA1424; }
html.hi-links :is(div.page, .bm, .kov) a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .18em !important; outline: 2px solid var(--hi-mark) !important; outline-offset: 2px; }

/* Graustufen */
html.hi-grau { filter: grayscale(1); }

/* Bewegung aus: Animationen springen sofort ans Ende, statt mitten im Ablauf stehen zu bleiben. Skripte fragen die Einstellung über matchMedia ab (header.php) */
html.hi-ruhig *, html.hi-ruhig *::before, html.hi-ruhig *::after { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }

/* Hoher Kontrast: Einfarbiger Grund, eine Textfarbe, kein Licht. Der normale Mauszeiger ersetzt den eigenen */
html.hi-kontrast { --hi-grund: #000; --hi-schrift: #fff; --hi-akzent: #7fe3df; }
html.hi-kontrast.lightmode { --hi-grund: #fff; --hi-schrift: #000; --hi-akzent: #8a0f1b; }
html.hi-kontrast, html.hi-kontrast body { background: var(--hi-grund) !important; }
html.hi-kontrast :is(#ak86-licht-canvas, .grid-bg, .bubwrap, .cur, .hero-img, .hg-media, #lxBg, .tm-wall, .as-bild, .pflo) { display: none !important; }
/* Kopfzeile: fester Streifen statt Glas, sonst läuft der Inhalt lesbar durch Logo und Menü */
html.hi-kontrast .stbg.show { left: 0 !important; right: 0 !important; top: 0 !important; width: 100% !important; height: 96px !important; opacity: 1 !important; background: var(--hi-grund) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-bottom: 2px solid var(--hi-schrift) !important; border-radius: 0 !important; }
html.hi-kontrast :is(div.page, .bm) *:not(img, svg, svg *) { color: var(--hi-schrift) !important; -webkit-text-fill-color: currentColor !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; mix-blend-mode: normal !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.hi-kontrast :is(div.page) :is(a:not(.rb):not(.ak-logo), .kick) { color: var(--hi-akzent) !important; }
html.hi-kontrast .rb::before { border: 2px solid var(--hi-schrift) !important; mix-blend-mode: normal !important; animation: none !important; }
html.hi-kontrast .rb::after { display: none !important; }
html.hi-kontrast .mnu-btn i { background: var(--hi-schrift) !important; }
html.hi-kontrast :focus-visible { outline: 3px solid var(--hi-akzent) !important; outline-offset: 3px; }