/* bericht.css — Kurzbeschreibung: Aussehen der Balken-Darstellung „Order Income by Regions“ (Workflows-Bento und Ansicht für Externe).
   Farben nur über Variablen: --oi-text, --oi-leise, --oi-linie, --oi-akzent, --oi-rot, --oi-weich, --oi-dunkel; die einbindende Seite bildet sie auf die Marke ab. */
.oi-leiste { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 8px; }
.oi-gruppe { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--marke-r-pill, 999px); background: var(--oi-weich); }
.oi-pille { height: 24px; padding: 0 10px; border: 0; border-radius: var(--marke-r-pill, 999px); background: transparent; color: var(--oi-text); font: 600 11.5px var(--marke-schrift, Inter, sans-serif); cursor: pointer; white-space: nowrap; }
.oi-pille:hover { background: color-mix(in srgb, var(--oi-text) 8%, transparent); }
.oi-pille.an { background: var(--oi-dunkel); color: #fff; }
.oi-pille:focus-visible { outline: 2px solid var(--oi-akzent); outline-offset: 1px; }
.oi-zeilen { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.oi-zeile { display: grid; grid-template-columns: minmax(70px, .9fr) minmax(40px, 1.4fr) minmax(72px, auto); align-items: center; gap: 8px; font: 500 12.5px var(--marke-schrift, Inter, sans-serif); color: var(--oi-text); }
.oi-zeile.ohne { grid-template-columns: minmax(70px, 1fr) auto; }   /* ohne Zahl kein Balken: der Hinweis (z. B. „SAP nicht angebunden“) bekommt Platz */
.oi-zeile.summe { font-weight: 800; }
.oi-zeile.summe .oi-wert b { font-weight: 800; }
.oi-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-wert { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oi-wert b { font-weight: 700; }
.oi-bahn { position: relative; height: 8px; border-radius: var(--marke-r-pill, 999px); background: var(--oi-weich); overflow: hidden; }
.oi-bahn i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--marke-r-pill, 999px); background: var(--oi-akzent); }
.oi-bahn i.neg { background: var(--oi-rot); }
.oi-bahn i.pos { background: var(--oi-akzent); }
.oi-bahn.oi-mitte::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--oi-linie); }
.oi-leise { color: var(--oi-leise); font-weight: 500; font-size: 11.5px; }
.oi-rot { color: var(--oi-rot) !important; font-weight: 600; }
.oi-trenner { border: 0; border-top: 1px solid var(--oi-linie); margin: 3px 0; width: 100%; }
.oi-hinweis { padding: 14px 12px; border-radius: var(--marke-r-m, 12px); background: var(--oi-weich); color: var(--oi-text); font: 600 13px var(--marke-schrift, Inter, sans-serif); text-align: center; }
.oi-hinweis.klein { margin-top: 8px; padding: 6px 10px; font-size: 11.5px; font-weight: 500; color: var(--oi-leise); }