.wahl { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.2rem; }
fieldset { border: 1px solid #999; margin: 0; padding: .5rem .8rem; }
legend { font-size: .85rem; }
fieldset label { display: block; font-size: .95rem; padding: .15rem 0; }
.liste { list-style: none; padding: 0; margin: 0; }
.liste li { display: flex; align-items: center; gap: .8rem; padding: .25rem 0; border-bottom: 1px solid #eee; }
.dauer { min-width: 5rem; font-variant-numeric: tabular-nums; }
.probe { flex: 1 1 auto; max-width: 14rem; height: 1.4rem; background: #222;
         animation-name: var(--k); animation-iteration-count: infinite; }
@keyframes k-lin-lin { 0%{opacity:0;animation-timing-function:linear} 50%{opacity:1;animation-timing-function:linear} 100%{opacity:0} }
@keyframes k-lin-deg { 0%{opacity:0;animation-timing-function:linear} 50%{opacity:1;animation-timing-function:ease-out} 100%{opacity:0} }
@keyframes k-lin-pro { 0%{opacity:0;animation-timing-function:linear} 50%{opacity:1;animation-timing-function:ease-in} 100%{opacity:0} }
@keyframes k-deg-lin { 0%{opacity:0;animation-timing-function:ease-out} 50%{opacity:1;animation-timing-function:linear} 100%{opacity:0} }
@keyframes k-deg-deg { 0%{opacity:0;animation-timing-function:ease-out} 50%{opacity:1;animation-timing-function:ease-out} 100%{opacity:0} }
@keyframes k-deg-pro { 0%{opacity:0;animation-timing-function:ease-out} 50%{opacity:1;animation-timing-function:ease-in} 100%{opacity:0} }
@keyframes k-pro-lin { 0%{opacity:0;animation-timing-function:ease-in} 50%{opacity:1;animation-timing-function:linear} 100%{opacity:0} }
@keyframes k-pro-deg { 0%{opacity:0;animation-timing-function:ease-in} 50%{opacity:1;animation-timing-function:ease-out} 100%{opacity:0} }
@keyframes k-pro-pro { 0%{opacity:0;animation-timing-function:ease-in} 50%{opacity:1;animation-timing-function:ease-in} 100%{opacity:0} }
body:has(#auf-lin:checked):has(#ab-lin:checked) { --k: k-lin-lin; }
body:has(#auf-lin:checked):has(#ab-deg:checked) { --k: k-lin-deg; }
body:has(#auf-lin:checked):has(#ab-pro:checked) { --k: k-lin-pro; }
body:has(#auf-deg:checked):has(#ab-lin:checked) { --k: k-deg-lin; }
body:has(#auf-deg:checked):has(#ab-deg:checked) { --k: k-deg-deg; }
body:has(#auf-deg:checked):has(#ab-pro:checked) { --k: k-deg-pro; }
body:has(#auf-pro:checked):has(#ab-lin:checked) { --k: k-pro-lin; }
body:has(#auf-pro:checked):has(#ab-deg:checked) { --k: k-pro-deg; }
body:has(#auf-pro:checked):has(#ab-pro:checked) { --k: k-pro-pro; }
.d100 { animation-duration: 200ms; }
.d200 { animation-duration: 400ms; }
.d300 { animation-duration: 600ms; }
.d400 { animation-duration: 800ms; }
.d500 { animation-duration: 1000ms; }
.d600 { animation-duration: 1200ms; }
.d700 { animation-duration: 1400ms; }
.d800 { animation-duration: 1600ms; }
.d900 { animation-duration: 1800ms; }
.d1000 { animation-duration: 2000ms; }
.d1100 { animation-duration: 2200ms; }
.d1200 { animation-duration: 2400ms; }
.d1300 { animation-duration: 2600ms; }
.d1400 { animation-duration: 2800ms; }
.d1500 { animation-duration: 3000ms; }
.d1600 { animation-duration: 3200ms; }
.d1700 { animation-duration: 3400ms; }
.d1800 { animation-duration: 3600ms; }
.d1900 { animation-duration: 3800ms; }
.d2000 { animation-duration: 4000ms; }
.d2100 { animation-duration: 4200ms; }
.d2200 { animation-duration: 4400ms; }
.d2300 { animation-duration: 4600ms; }
.d2400 { animation-duration: 4800ms; }
.d2500 { animation-duration: 5000ms; }
.d2600 { animation-duration: 5200ms; }
.d2700 { animation-duration: 5400ms; }
.d2800 { animation-duration: 5600ms; }
.d2900 { animation-duration: 5800ms; }
.d3000 { animation-duration: 6000ms; }