/* Seiten Ergebnis & Ursachen */

/* Zielbalken mit Soll-Marke (Standorte) */
.goal-bar { position: relative; overflow: visible; }
.goal-bar > div { border-radius: 999px; }
.goal-bar > div.goal-behind { background: var(--chart-4); }
.goal-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--foreground); border-radius: 1px; }
.goal-mark-legend { display: inline-block; width: 2px; height: .8rem; margin-right: .3rem; vertical-align: -2px; background: var(--foreground); }

/* Linkleiste „Diese Gesellschaft in …“ */
.site-links { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin-bottom: 1rem; font-size: .8rem; color: var(--muted-foreground); }
.site-links a { color: var(--foreground); }

/* Zweispaltige Tabellen für Top/Flop-Abweichungen */
.split-head { font-size: .75rem; font-weight: 600; color: var(--muted-foreground); margin: .25rem 0 .35rem; text-transform: uppercase; letter-spacing: .04em; }
.split-head + table { margin-bottom: .75rem; }

/* Tabellen mit langen Konto- oder Positionsnamen: erste Spalte darf umbrechen statt seitlich zu scrollen */
.fin-table.wrap-first td:first-child { white-space: normal; min-width: 9rem; }

/* Hohe Diagramme für viele liegende Balken (z. B. 15 Kostenkonten) */
.chart.h-a-tall { height: 26rem; }
@media (max-width: 640px) { .chart.h-a-tall { height: 30rem; } }

/* Farbkästchen in Legenden unter Diagrammen */
.swatch { display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; border-radius: 2px; vertical-align: -1px; }
.swatch-neg { background: var(--chart-4); }
.swatch-pos { background: var(--chart-1); }

/* Hinweis auf eine Auffälligkeit in den Daten (z. B. Plan prüfen) */
.note-flag { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 1rem; padding: .65rem .85rem; font-size: .85rem; line-height: 1.45;
  border: 1px solid color-mix(in oklch, var(--chart-2) 55%, transparent); border-left-width: 4px; border-radius: var(--radius);
  background: color-mix(in oklch, var(--chart-2) 12%, var(--card)); color: var(--foreground); }

/* Platzhalter, wenn Daten erst mit dem nächsten Abgleich kommen */
.data-pending { padding: 1rem; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted-foreground); font-size: .875rem; }
.data-pending strong { color: var(--foreground); }

/* Warnwert in Tabellen (z. B. unvollständige Kosten) */
.warn-cell { background: color-mix(in oklch, var(--chart-2) 22%, transparent); }