/* betterbedesign Barrierefreiheit – Bedienfeld und Klassen-Vertrag (docs/BARRIEREFREIHEIT-KLASSEN.md). */

/* ---- Bedienfeld ---- */
.bbd-a11y { position: fixed; bottom: 1rem; z-index: 99990; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.4; }
.bbd-a11y--left { left: 1rem; }
.bbd-a11y--right { right: 1rem; }
.bbd-a11y__btn { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--bbd-a11y-accent, #FF4D1F); color: var(--bbd-a11y-on, #fff); cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.bbd-a11y__btn:focus-visible, .bbd-a11y button:focus-visible { outline: 3px solid #0B0B0B; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
.bbd-a11y__panel { position: absolute; bottom: 4rem; width: min(22rem, calc(100vw - 2rem)); max-height: calc(100vh - 6rem); overflow: auto; padding: 1rem; border-radius: .75rem; background: #fff; color: #0B0B0B; box-shadow: 0 8px 30px rgba(0, 0, 0, .4); }
.bbd-a11y--left .bbd-a11y__panel { left: 0; }
.bbd-a11y--right .bbd-a11y__panel { right: 0; }
.bbd-a11y__panel[hidden] { display: none; }
.bbd-a11y__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.bbd-a11y__head h2 { margin: 0; font-size: 1.125rem; font-weight: 700; color: inherit; }
.bbd-a11y__close { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: #eee; color: #0B0B0B; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.bbd-a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.bbd-a11y__item { min-height: 3.25rem; padding: .5rem; border: 2px solid #0B0B0B; border-radius: .5rem; background: #fff; color: #0B0B0B; font: inherit; font-size: .875rem; font-weight: 600; text-align: left; cursor: pointer; }
.bbd-a11y__item[aria-pressed="true"] { background: #0B0B0B; color: #fff; }
.bbd-a11y__reset { width: 100%; margin-top: .75rem; padding: .625rem; border: 2px solid #0B0B0B; border-radius: .5rem; background: #fff; color: #0B0B0B; font: inherit; font-weight: 600; cursor: pointer; }
.bbd-a11y__note { margin: .75rem 0 0; font-size: .8125rem; color: #444; }

/* ---- Wirkung auf die Seite (Klassen auf <html>) ---- */
html.bbd-a11y-text-1 { font-size: 112.5%; }
html.bbd-a11y-text-2 { font-size: 125%; }
html.bbd-a11y-text-3 { font-size: 150%; }

html.bbd-a11y-spacing body :where(p, li, a, span, div, h1, h2, h3, h4, h5, h6, td, th, label, button, input, textarea) { line-height: 1.8 !important; letter-spacing: .02em; word-spacing: .08em; }
html.bbd-a11y-readable body, html.bbd-a11y-readable body :where(*:not(svg):not(svg *)) { font-family: Verdana, Tahoma, Arial, sans-serif !important; font-style: normal !important; }

html.bbd-a11y-grayscale { filter: grayscale(1); }

html.bbd-a11y-contrast body :where(*:not(#bbd-a11y):not(#bbd-a11y *)) { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; }
html.bbd-a11y-contrast body a:not(#bbd-a11y a), html.bbd-a11y-contrast body a:not(#bbd-a11y a) * { color: #ffe600 !important; }

html.bbd-a11y-links body a:not(#bbd-a11y a) { text-decoration: underline !important; text-decoration-thickness: .15em !important; text-underline-offset: .2em; outline: 2px solid currentColor; outline-offset: 2px; }

html.bbd-a11y-focus :focus-visible { outline: 4px solid #ffbf00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px #0B0B0B !important; }

html.bbd-a11y-no-motion *, html.bbd-a11y-no-motion *::before, html.bbd-a11y-no-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

html.bbd-a11y-hide-images body :where(img, picture, video, canvas, iframe):not(#bbd-a11y *) { visibility: hidden !important; }
html.bbd-a11y-hide-images body :where(*:not(#bbd-a11y):not(#bbd-a11y *)) { background-image: none !important; }

@media (prefers-reduced-motion: reduce) {
	.bbd-a11y__btn { transition: none; }
}