:root { --niu-accessibility-indicator-active-color: #000; --niu-accessibility-indicator-color: #5f5f5f; } .niu-accessibility-wrapper { } .niu-accessibility-tools-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:1rem; } .niu-accessibility-btn{ background: unset; border: 1px solid var(--gray-light); border-radius: 12px; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; background: white; } .niu-accessibility-indicator-container > span { width: 16px; height: 8px; border-radius: 10px; border:1px solid var(--niu-accessibility-indicator-color); display: inline-block; margin: 0.125rem 2px; transition: width .1s ease-in-out , height .1s ease-in-out, background-color .1s ease-in-out; } .niu-accessibility-btn[data-niu-state="1"] .niu-accessibility-indicator-container > span:nth-child(1){ background-color: var(--niu-accessibility-indicator-active-color); width:24px; height:10px; transition: width .1s ease-in-out , height .1s ease-in-out, background-color .1s ease-in-out; border:1px solid var(--niu-accessibility-indicator-active-color); } .niu-accessibility-btn[data-niu-state="2"] .niu-accessibility-indicator-container > span:nth-child(1), .niu-accessibility-btn[data-niu-state="2"] .niu-accessibility-indicator-container > span:nth-child(2){ background-color: var(--niu-accessibility-indicator-active-color); width:24px; height:10px; transition: width .1s ease-in-out , height .1s ease-in-out, background-color .1s ease-in-out; border:1px solid var(--niu-accessibility-indicator-active-color); } .niu-accessibility-btn[data-niu-state="3"] .niu-accessibility-indicator-container > span:nth-child(1), .niu-accessibility-btn[data-niu-state="3"] .niu-accessibility-indicator-container > span:nth-child(2), .niu-accessibility-btn[data-niu-state="3"] .niu-accessibility-indicator-container > span:nth-child(3){ background-color: var(--niu-accessibility-indicator-active-color); width:24px; height:10px; transition: width .1s ease-in-out , height .1s ease-in-out, background-color .1s ease-in-out; border:1px solid var(--niu-accessibility-indicator-active-color); } .niu-accessibility-btn[data-niu-state="4"] .niu-accessibility-indicator-container > span:nth-child(1), .niu-accessibility-btn[data-niu-state="4"] .niu-accessibility-indicator-container > span:nth-child(2), .niu-accessibility-btn[data-niu-state="4"] .niu-accessibility-indicator-container > span:nth-child(3), .niu-accessibility-btn[data-niu-state="4"] .niu-accessibility-indicator-container > span:nth-child(4){ background-color: var(--niu-accessibility-indicator-active-color); width:24px; height:10px; transition: width .1s ease-in-out , height .1s ease-in-out, background-color .1s ease-in-out; border:1px solid var(--niu-accessibility-indicator-active-color); } .niu-accessibility-icon { margin-bottom:1rem; height:48px; display:flex; align-items:center; justify-content: center; } .niu-accessibility-palette{ display: flex; gap: 0.25rem; } .niu-accessibility-palette > div{ aspect-ratio: 1 / 1; flex-grow: 1; border-radius: 3px; } /* Theme v2 B3-2b (Audit Nr. 45): Barrierefreiheits-Panel. Diese Datei wird als