/* Skip link and accessibility menu for the stand-alone pages (check/, demo/)
   that carry their own styles instead of styles.css. Copied from the
   "skip link and accessibility menu" block in styles.css: a change there
   belongs here too. 20.10.2026 */
:root { --accent: #0B7A6B; }
/* ---------- skip link and accessibility menu ---------- */
.skip { position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 1000; background: var(--accent); color: #FFFFFF; padding: .7rem 1rem; font-weight: 700; text-decoration: none; border-radius: 0; }
.skip:focus { top: 1rem; }
.a11y-btn { position: fixed; inset-inline-end: clamp(1rem, 2vw, 1.75rem); bottom: clamp(1rem, 2vw, 1.75rem); z-index: 9990; width: 54px; height: 54px; border: 0; border-radius: 0; background: #1B4FA8; color: #FFFFFF; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 22px -6px rgba(22, 32, 46, .35); }
/* .a11y-head removed 7.10.2026: the button is floating, not in the bar */
.a11y.a11y--top { top: 76px; bottom: auto; max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px); }
.a11y { position: fixed; inset-inline-end: clamp(1rem, 2vw, 1.75rem); bottom: calc(clamp(1rem, 2vw, 1.75rem) + 64px); z-index: 9991; width: min(340px, calc(100vw - 2rem)); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); display: flex; flex-direction: column; background: #FFFFFF; color: #16202E; border: 2px solid #16202E; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.4; letter-spacing: 0; box-shadow: 0 18px 40px -12px rgba(22, 32, 46, .35); }
.a11y[hidden] { display: none; }
.a11y__head { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-bottom: 1px solid #D5DCE5; }
.a11y .a11y__title { margin: 0; font: 700 18px/1.2 Arial, Helvetica, sans-serif; color: #16202E; }
.a11y__body { overflow-y: auto; padding: .2rem .9rem .8rem; }
.a11y .a11y__group { margin: .9rem 0 .35rem; font: 700 13px/1.2 Arial, Helvetica, sans-serif; color: #5C6B80; letter-spacing: .04em; }
.a11y button { font: inherit; color: #16202E; background: #FFFFFF; border: 1px solid #5C6B80; border-radius: 0; cursor: pointer; }
.a11y button[disabled] { opacity: .4; cursor: default; }
.a11y__step { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem 0; }
.a11y__label { font-size: 15px; }
.a11y__ctrl { display: flex; align-items: center; }
.a11y__ctrl button { width: 36px; height: 36px; padding: 0; font-size: 20px; line-height: 1; text-align: center; }
.a11y__ctrl output { min-width: 3.6rem; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; direction: ltr; }
.a11y .a11y__tog { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: -1px; padding: .6rem .7rem; text-align: start; border-color: #D5DCE5; font-size: 15px; }
.a11y__tog i { flex: 0 0 auto; width: 38px; height: 20px; border: 2px solid #5C6B80; background: #FFFFFF; position: relative; }
.a11y__tog i::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 12px; height: 12px; background: #5C6B80; }
.a11y .a11y__tog[aria-pressed="true"] { background: #EEF3FA; }
.a11y__tog[aria-pressed="true"] i { border-color: #1B4FA8; background: #1B4FA8; }
.a11y__tog[aria-pressed="true"] i::after { inset-inline-start: auto; inset-inline-end: 2px; background: #FFFFFF; }
.a11y__foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem .9rem; border-top: 1px solid #D5DCE5; }
.a11y .a11y__reset { background: #16202E; color: #FFFFFF; border-color: #16202E; padding: .55rem .9rem; font-size: 15px; }
.a11y .a11y__close { width: 36px; height: 36px; padding: 0; font-size: 22px; line-height: 1; text-align: center; }
.a11y__link { color: #0B5E52; text-decoration: underline; font-size: 15px; }
.a11y-btn:focus-visible, .a11y button:focus-visible, .a11y__link:focus-visible, .skip:focus { outline: 3px solid #F2A900; outline-offset: 2px; }
.a11y-ruler { position: fixed; left: 0; right: 0; height: 8px; z-index: 9980; background: #F2A900; border-top: 2px solid #16202E; border-bottom: 2px solid #16202E; pointer-events: none; }
.a11y-shade { position: fixed; left: 0; right: 0; z-index: 9979; background: rgba(0, 0, 0, .6); pointer-events: none; }
.a11y-shade--top { top: 0; }
.a11y-shade--bottom { bottom: 0; }
.a11y-ruler[hidden], .a11y-shade[hidden] { display: none; }

html.a11y-spacing body :where(p, li, dd, dt, td, th, label, blockquote, summary, h1, h2, h3, h4) { line-height: var(--a11y-lh) !important; }
html.a11y-letters body :where(p, li, a, span, dd, dt, td, th, label, blockquote, summary, h1, h2, h3, h4, button) { letter-spacing: var(--a11y-ls) !important; word-spacing: calc(var(--a11y-ls) * 2) !important; }
html.a11y-font body :where(*):not(.a11y, .a11y *) { font-family: Arial, Helvetica, sans-serif !important; }
html.a11y-links a:not(.a11y__link) { text-decoration: underline !important; text-underline-offset: 3px; outline: 2px dashed currentColor; outline-offset: 2px; }
html.a11y-headings main :where(h1, h2, h3, h4) { outline: 3px solid #1B4FA8; outline-offset: 4px; background: #EEF3FA !important; }
html.a11y-gray body > *:not(.a11y, .a11y-btn, .a11y-ruler, .a11y-shade) { filter: grayscale(1); }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewBox='0 0 40 48'%3E%3Cpath d='M2 2l0 38 10-9 7 15 7-3-7-15 14 0z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 2 2, auto !important; }

html.a11y-contrast body, html.a11y-contrast .page, html.a11y-contrast section, html.a11y-contrast header, html.a11y-contrast footer, html.a11y-contrast main, html.a11y-contrast div:not(.a11y-ruler, .a11y-shade), html.a11y-contrast article, html.a11y-contrast figure, html.a11y-contrast details, html.a11y-contrast summary, html.a11y-contrast form, html.a11y-contrast input, html.a11y-contrast textarea, html.a11y-contrast table, html.a11y-contrast th, html.a11y-contrast td { background: #000000 !important; color: #FFFFFF !important; border-color: #FFFFFF !important; box-shadow: none !important; }
html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span, html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast label, html.a11y-contrast strong { color: #FFFFFF !important; background-color: transparent !important; }
html.a11y-contrast a { color: #FFE600 !important; text-decoration: underline !important; }
html.a11y-contrast .btn, html.a11y-contrast button:not(.a11y-btn) { background: #000000 !important; color: #FFE600 !important; border: 2px solid #FFE600 !important; }
html.a11y-contrast img { filter: grayscale(1) contrast(1.2); background: #FFFFFF !important; }
html.a11y-contrast .a11y, html.a11y-contrast .a11y div { background: #FFFFFF !important; color: #000000 !important; border-color: #000000 !important; }
html.a11y-contrast .a11y span, html.a11y-contrast .a11y p, html.a11y-contrast .a11y h2, html.a11y-contrast .a11y h3, html.a11y-contrast .a11y output { color: #000000 !important; }
html.a11y-contrast .a11y button { background: #FFFFFF !important; color: #000000 !important; border: 1px solid #000000 !important; }
html.a11y-contrast .a11y button[aria-pressed="true"], html.a11y-contrast .a11y .a11y__reset { background: #000000 !important; color: #FFFFFF !important; }
html.a11y-contrast .a11y button[aria-pressed="true"] span { color: #FFFFFF !important; }
html.a11y-contrast .a11y a { color: #0B5E52 !important; }
@media (hover: hover) and (pointer: fine) {
  .a11y-btn:hover { background: #163F87; }
  .a11y button:hover:not([disabled]) { border-color: #16202E; }
}