.twentyone-infographic{--available-range: calc(var(--infographic-height, 100%) - var(--text-font-size) * 2 - 2px - var(--gap) * 2);--gap: var(--wp--preset--spacing--12);--infographic-height: calc(var(--wp--preset--spacing--96) * 3);--text-font-size: var(--wp--preset--font-size--level-5);margin:var(--wp--preset--spacing--16) 0}.twentyone-infographic:first-child{margin-top:0}.twentyone-infographic:last-child{margin-bottom:0}.twentyone-infographic:has(g:hover) g:not(:hover):not(:focus-visible),.twentyone-infographic:has(g:focus-visible) g:not(:hover):not(:focus-visible){opacity:.25}.twentyone-infographic svg{width:var(--infographic-width, 100%);height:var(--infographic-height, 100%)}.twentyone-infographic.is--bar g{--available-range: calc(var(--infographic-width, 100%) - var(--legend-width) * 1.5 - 2px - var(--gap) * 2);--height: calc((100% - (var(--datasets, 2) - 1) * var(--gap)) / var(--datasets, 2));--legend-width: 10rem;--width: calc(var(--available-range) * var(--value-by-max, 1));--x: calc(var(--legend-width) + var(--gap));--y: calc((var(--index) * (var(--infographic-height, 100%) - (var(--datasets, 2) - 1) * var(--gap)) / var(--datasets, 2)) + (var(--index) * var(--gap)))}.twentyone-infographic.is--bar g text{--text-y: calc(var(--y) + var(--height) / 2);translate:var(--legend-width) var(--text-y);dominant-baseline:middle;text-anchor:end}.twentyone-infographic.is--bar g text.twentyone-infographic-value{translate:calc(var(--x) + var(--width) + var(--gap)) var(--text-y);text-anchor:start}.twentyone-infographic.is--line g{--height: var(--available-range);--width: calc(var(--infographic-width, 100%) / var(--datasets, 2))}.twentyone-infographic.is--line g circle.twentyone-infographic-indicator{cx:calc(var(--x) + var(--width) / 2);cy:var(--y)}.twentyone-infographic.is--line g rect{opacity:0;y:calc(var(--text-font-size) + var(--gap))}.twentyone-infographic.is--line rect.twentyone-infographic-fake{fill:var(--twentyone--color--grey);height:var(--available-range);width:var(--infographic-width, 100%);x:0;y:calc(var(--text-font-size) + var(--gap))}.twentyone-infographic.is--pie{--pi: 3.14159}.twentyone-infographic.is--pie g{--legend-x: calc(50% + var(--gap) * 2);--y: calc((var(--infographic-height, 100%) - (var(--datasets) * var(--text-font-size) + (var(--datasets) - 1) * var(--gap))) / 2 + var(--index) * (var(--text-font-size) + var(--gap)))}.twentyone-infographic.is--pie g circle.twentyone-infographic-indicator{cx:calc(var(--legend-x) + var(--indicator-width) / 2);cy:var(--y)}.twentyone-infographic.is--pie g circle:not(.twentyone-infographic-indicator){--radius: calc((50% - var(--stroke-width)) / 2);--stroke-width: calc(var(--wp--preset--spacing--50) * 1.5);rotate:-90deg;transform-origin:25% 50%;cx:25%;cy:50%;fill:none;outline:none;r:var(--radius);stroke:var(--color, var(--schroeder-digital-blue));stroke-dasharray:calc(var(--value) / var(--sum) * var(--pi) * var(--radius) * 2) calc(var(--pi) * var(--radius) * 2);stroke-dashoffset:calc((var(--previous-values, 0) / var(--sum)) * var(--pi) * var(--radius) * -2);stroke-width:var(--stroke-width)}.twentyone-infographic.is--pie g text{translate:calc(var(--legend-x) + var(--indicator-width) + var(--gap)) var(--y);dominant-baseline:middle;text-anchor:start}.twentyone-infographic g{--height: calc(var(--available-range) * var(--value-by-max, 1));--indicator-width: .75rem;--value-by-max: calc(var(--value) / var(--max));--width: calc((var(--infographic-width, 100%) - (var(--datasets, 2) - 1) * var(--gap)) / var(--datasets, 2));--x: calc((var(--index) * (var(--infographic-width, 100%) - (var(--datasets, 2) - 1) * var(--gap)) / var(--datasets, 2)) + (var(--index) * var(--gap)));--y: calc(var(--text-font-size) + var(--gap) + var(--available-range) * (1 - var(--value-by-max, 1)));cursor:pointer;outline:none;transition:var(--wp--custom--transition--preset--default)}.twentyone-infographic g circle{border-radius:50%}.twentyone-infographic g circle.twentyone-infographic-indicator{transform:none;fill:var(--color, var(--schroeder-digital-blue));r:calc(var(--indicator-width) / 2);stroke:none}.twentyone-infographic g rect{fill:var(--color, var(--schroeder-digital-blue));height:var(--height);width:var(--width);x:var(--x);y:var(--y)}.twentyone-infographic g rect,.twentyone-infographic g path,.twentyone-infographic g circle,.twentyone-infographic g polygon{outline-color:transparent;outline-offset:0;outline-style:solid;outline-width:2px;transition:var(--wp--custom--transition--preset--default)}.twentyone-infographic g text{--text-x: calc(var(--x) + var(--width) / 2);translate:var(--text-x) calc(var(--infographic-height, 100%) - var(--text-font-size));dominant-baseline:hanging;fill:var(--wp--preset--color--black);font-size:var(--text-font-size);text-anchor:middle}.twentyone-infographic g text.twentyone-infographic-value{translate:var(--text-x) calc(var(--y) - var(--gap) - var(--text-font-size))}.twentyone-infographic g:focus-visible rect,.twentyone-infographic g:focus-visible path,.twentyone-infographic g:focus-visible circle,.twentyone-infographic g:focus-visible polygon{outline-color:var(--wp--preset--color--blue);outline-offset:.25em}