.dg-ring { position: relative; flex: none; }
.dg-ring svg { width: 100%; height: 100%; }
.dg-ring circle { transition: stroke-dashoffset var(--d-lang) var(--e-aus); }
.dg-ring-mitte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dg-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dg-legende li { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-s); color: var(--ink-2); }
.dg-legende li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dg-legende li b { font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.dg-ring .seg { fill: none; stroke-width: 12; stroke-linecap: butt; }
.dg-ring .seg.spur { stroke: var(--s3); }
.dg-ring .seg.gut { stroke: var(--status-gut); }
.dg-ring .seg.warn { stroke: var(--status-warn); }
.dg-ring .seg.krit { stroke: var(--status-krit); }
.dg-legende li i.gut { background: var(--status-gut); }
.dg-legende li i.warn { background: var(--status-warn); }
.dg-legende li i.krit { background: var(--status-krit); }
.dg-ring { width: var(--gr, 148px); height: var(--gr, 148px); }