/* Barrierefreiheits-Widget (AO-Standard). Baut sich aus barrierefreiheit.js selbst auf, übrige Seite bleibt unberührt.
   Farben aus der Seite: --primaer, --tief. Nichts wird an Dritte übertragen. */

.bf-knopf { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 9000; width: 54px; height: 54px; border-radius: 50%; border: 0; background: var(--primaer, #107EB3); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(16, 85, 111, .3); touch-action: manipulation; transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease; }
.bf-knopf svg { width: 30px; height: 30px; }
.bf-knopf:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .bf-knopf:hover { background: var(--tief, #10556F); } }
.bf-knopf:focus-visible, .bf-panel :focus-visible { outline: 3px solid var(--tief, #10556F); outline-offset: 3px; }
html.bf-seite-links .bf-knopf { right: auto; left: 18px; }

.bf-panel { position: fixed; right: 18px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 9001; width: min(360px, calc(100vw - 36px)); max-height: calc(100vh - 110px); overflow-y: auto; background: #fff; color: #161616; border-radius: 18px; box-shadow: 0 24px 60px rgba(16, 85, 111, .28); padding: 18px 18px 14px; font: 400 1rem/1.4 var(--schrift-text, system-ui, sans-serif); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(.98); transition: opacity 200ms cubic-bezier(.23, 1, .32, 1), transform 200ms cubic-bezier(.23, 1, .32, 1), visibility 0s linear 200ms; }
.bf-panel[data-offen] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 240ms cubic-bezier(.23, 1, .32, 1), transform 240ms cubic-bezier(.23, 1, .32, 1), visibility 0s; }
html.bf-seite-links .bf-panel { right: auto; left: 18px; }
.bf-panel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.bf-panel-kopf .bf-titel { font-weight: 700; font-size: 1.125rem; margin: 0; color: #161616; letter-spacing: 0; }
.bf-zu { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #D5DEE6; background: #fff; color: #161616; cursor: pointer; display: grid; place-items: center; }
.bf-zu svg { width: 18px; height: 18px; }
.bf-gruppe { border: 0; padding: 0; margin: 12px 0 0; }
.bf-gruppe legend { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5A6B78; padding: 0; margin-bottom: 6px; }
.bf-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bf-schalter { min-height: 44px; padding: 8px 10px; border: 1.5px solid #D5DEE6; border-radius: 10px; background: #fff; color: #161616; font: inherit; font-size: .875rem; text-align: left; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: border-color 160ms ease, background-color 160ms ease; }
.bf-schalter[aria-pressed="true"] { border-color: var(--primaer, #107EB3); background: #EBF0F5; color: var(--tief, #10556F); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .bf-schalter:hover { border-color: var(--primaer, #107EB3); } }
.bf-groesse { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; }
.bf-groesse .bf-schalter { width: 48px; text-align: center; font-weight: 700; font-size: 1rem; }
.bf-groesse output { flex: 1; text-align: center; font-weight: 700; }
.bf-fuss { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E1E8EE; }
.bf-fuss .bf-schalter { width: 100%; text-align: center; font-weight: 700; }

/* --- Wirkungen auf die Seite (Klassen am html-Element) --- */
html.bf-kontrast body > *:not(.bf-wurzel) { filter: contrast(1.35); }
html.bf-kontrast body { background: #fff; }
html.bf-kontrast :is(p, li, span, a, h1, h2, h3, label, summary, dd, dt) { color: #000 !important; }
html.bf-kontrast :is(.knopf, .kopf a.knopf) { background: #000 !important; color: #fff !important; border-color: #000 !important; }
html.bf-invertiert body > *:not(.bf-wurzel) { filter: invert(1) hue-rotate(180deg); }
html.bf-invertiert body > *:not(.bf-wurzel) :is(img, picture, video) { filter: invert(1) hue-rotate(180deg); }
html.bf-grau body > *:not(.bf-wurzel) { filter: grayscale(1); }
html.bf-zeilen body :is(p, li, dd, label, summary, a) { line-height: 2 !important; }
html.bf-abstand body :is(p, li, h1, h2, h3, a, label, summary, span) { letter-spacing: .12em !important; word-spacing: .16em !important; }
html.bf-lesbar body, html.bf-lesbar body :is(h1, h2, h3, p, li, a, button, input, label, summary, span) { font-family: Verdana, Tahoma, Arial, sans-serif !important; }
html.bf-ueberschriften body :is(h1, h2, h3, h4) { outline: 3px dashed var(--primaer, #107EB3); outline-offset: 4px; }
html.bf-links body a { text-decoration: underline !important; text-underline-offset: 3px; outline: 2px solid #F2B400; outline-offset: 2px; }
html.bf-zeiger, html.bf-zeiger * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-7 1 4 8-3 1-4-8-5 5z' fill='%23000' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 4 2, auto !important; }
html.bf-ruhig *, html.bf-ruhig *::before, html.bf-ruhig *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.bf-ruhig .einblenden { opacity: 1 !important; transform: none !important; }

.bf-leselinie { position: fixed; left: 0; right: 0; height: 4px; background: var(--primaer, #107EB3); box-shadow: 0 0 0 2px #fff; z-index: 8998; pointer-events: none; display: none; }
html.bf-linie .bf-leselinie { display: block; }
.bf-maske { position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, .55); z-index: 8997; pointer-events: none; display: none; }
html.bf-maske-an .bf-maske { display: block; }
.bf-maske.oben { top: 0; } .bf-maske.unten { bottom: 0; }

@media (max-width: 480px) { .bf-knopf { width: 48px; height: 48px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .bf-panel { right: 12px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 24px); } }
@media print { .bf-wurzel { display: none !important; } }