/* Statistik — Charts sind handgezeichnetes SVG/DOM (siehe scripts/charts.js), damit sie
   die CI-Tokens hier direkt verwenden. Farbe kodiert nichts: die Balkenlänge trägt die
   Aussage, alle Balken sind Markenrot. Nur Status (offen/Fehler) ist farbig — immer
   zusammen mit seinem Label, nie Farbe allein. */
.stats-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stats-head h3 { margin: 0; font-size: 1rem; }
.stats-range { display: flex; gap: .35rem; }
.stats-range button { padding: .3rem .7rem; font-size: .72rem; }
.stats-range button.is-active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* KPI-Zeile: Zahlen, die keine Achse brauchen. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: .75rem; margin: 1rem 0 .75rem; }
.kpi {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .7rem .85rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.kpi-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* Der Betrag ist die längste Zahl der Zeile — er darf schrumpfen, aber nicht umbrechen. */
.kpi-value { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 600; line-height: 1.2; color: var(--heading); white-space: nowrap; }
.kpi-value small { margin-left: .2rem; font-size: .8rem; font-weight: 500; color: var(--muted); }
.kpi-value.is-warning { color: var(--warning); }
.kpi-value.is-error { color: var(--error); }
.kpi-note { font-size: .75rem; color: var(--muted); }

/* Übersicht: die klickbare Zähler-Kachel. Drei der vier KPI-Kacheln (Etappe 2) und
   jede Station des Trichters (Etappe 3a, unten) lösen dasselbe Problem — eine Fläche,
   die eine Zahl zeigt und trotzdem ein Klickziel ist (Filter/Sprung). Sie sollen
   aussehen wie die stille Statistik-Kachel oben, nur eben klickbar: eigene Fläche
   (`--surface-2`, damit sie sich vom Karteninhalt abhebt), Kachelmass statt Knopfmass,
   linksbündig, Grösse geerbt. Seit der Knopf-Voreinstellung von 2026-08-11 (base.css)
   ist das eine Handvoll Abweichungen und kein Rückbau mehr — Markenrot und VERSALIEN
   gibt es auf dem blossen `button` nicht mehr, also wird hier auch nichts davon
   zurückgenommen. Das Element bleibt trotzdem im Selektor (`button.kpi`, nicht `.kpi`):
   `.kpi` allein verlöre gegen `button` bei gleicher Spezifität nicht, aber die
   Div-Variante der Kachel (`<div class="kpi">`, Monats-Kachel) darf von diesem Block
   gerade NICHT getroffen werden. Ein zweiter Satz derselben Regeln für den Trichter
   wäre nur eine zweite Stelle, an der man es vergisst. */
button.kpi, button.funnel-stage, button.funnel-leak {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  width: 100%; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .7rem .85rem;
  font-family: inherit; font-size: inherit; font-weight: 400;
  cursor: pointer;
}
button.kpi:hover, button.funnel-stage:hover, button.funnel-leak:hover {
  background: var(--surface); border-color: var(--border-2);
}
button.kpi:focus-visible, button.funnel-stage:focus-visible, button.funnel-leak:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}

/* „Weg des Belegs" als Trichter (Übersicht): vier Stationen als Kette, das Leck
   daneben. Die Spur ist dieselbe auto-fit-Formel wie bei `.kpis` und braucht darum
   keine eigene Bruchstelle — auf schmalen Schirmen brechen die Kacheln um, statt die
   Seite waagrecht scrollen zu lassen. */
.funnel { margin: 0 0 1.25rem; }
.funnel h3 { margin: 0 0 .5rem; font-size: .95rem; }
.funnel-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; }
.funnel-count {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 600; line-height: 1.2;
  color: var(--heading); font-variant-numeric: tabular-nums;
}
.funnel-label { font-size: .78rem; color: var(--muted); }
/* Die Verengung: die Länge trägt die Grösse, die Farbe kodiert nichts — Markenrot wie
   jeder Balken dieser Datei. Die Spur bleibt sichtbar, sonst sieht man den Balken,
   aber nicht den Anteil. */
.funnel-bar { width: 100%; height: 6px; margin-top: .45rem; background: var(--border); border-radius: 999px; overflow: hidden; }
.funnel-bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
/* Das Leck ist keine fünfte Station, sondern der Abfluss neben dem Rohr: abgesetzt
   durch Abstand und roten Streifen (dieselbe Sprache wie `.reason.error` unten), ohne
   Trichterbalken. Das Wort „Hängt fest" steht daneben — Farbe trägt nie allein (§7).
   Der Selektor nennt das Element mit (`button.funnel-leak`), sonst verliert er gegen die
   geteilte Regel oben, die genauso spezifisch ist und `border`/`width` schon setzt — der
   rote Streifen bliebe grau. `width: auto` gehört dazu: 100 % der Rasterspur plus
   Aussenabstand sind genau um diesen Abstand zu breit und gäben der Seite waagrechten
   Scroll; als gestrecktes Rasterelement füllt die Kachel die Spur ohnehin. */
button.funnel-leak { width: auto; margin-left: .75rem; border-left: 3px solid var(--error); }
.funnel-leak .funnel-count { color: var(--error); }

/* Offene Posten: der Rückstand nach Grund. Jede Kachel ist ein Filter auf die
   Transaktionstabelle, also ein Button — Zahl gross, Grund darunter, Betrag nur
   wenn er eine einzige Währung hat (siehe services/stats.js). */
.open-items { margin: 1.25rem 0 .5rem; }
.open-items h4 { margin: 0 0 .5rem; font-size: .95rem; }
.reason-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.reason {
  display: flex; flex-direction: column; align-items: flex-start; gap: .05rem;
  min-width: 8.5rem; padding: .5rem .7rem; text-align: left;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border-2); border-left: 3px solid var(--border-2);
  border-radius: var(--radius); cursor: pointer;
}
.reason:hover { background: var(--surface-2); }
/* Der aktive Filter muss auch ohne Farbe erkennbar bleiben. */
.reason.is-active { background: var(--surface-2); border-color: var(--heading); box-shadow: var(--shadow-sm); }
.reason.warning { border-left-color: var(--warning); }
.reason.error { border-left-color: var(--error); }
.reason-count { font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--heading); }
.reason.warning .reason-count { color: var(--warning); }
.reason.error .reason-count { color: var(--error); }
.reason-label { font-size: .78rem; font-weight: 500; }
.reason-sum { font-size: .72rem; color: var(--muted); }

/* „Weg des Belegs" — die Kette pro Transaktionszeile: vier gleich breite Glieder
   (geholt · gebucht · Beleg · verbucht). Eine Datenmarke wie die Balkenlisten weiter
   unten, deshalb steht sie hier und nicht in tables.css: sie kodiert einen Zustand,
   sie richtet keine Tabelle aus.

   Die Kette ist zugleich der Knopf, der die Detailzeile aufklappt. Auch nach der
   Umkehr der Knopf-Voreinstellung (base.css) bleibt sie eine eigene Variante: der
   ruhige Rahmenknopf hat immer noch eine weisse Fläche und einen sichtbaren Rahmen,
   und hundert davon untereinander in einer Tabellenspalte wären ein Gitter. Diese
   Fläche ist eine Anzeige, die man auch anklicken kann — also unsichtbar bis zum
   Hover. Das Element steht im Selektor, damit `background`/`border` das blosse
   `button` bei gleicher Spezifität sicher schlagen. */
button.flow {
  display: flex; align-items: center; gap: 3px;
  /* Etwas breiter als die reinen Balken (vorher 4.5–8rem): das Chevron am Ende ist
     `flex: none` und nähme den vier Gliedern sonst genau seine Breite weg. */
  width: 100%; min-width: 5.5rem; max-width: 9rem;
  padding: .35rem .25rem;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: inherit; font-size: inherit; font-weight: 400;
  cursor: pointer;
}
/* Der Hover muss zeigen, dass die Fläche anfassbar ist — aber dezent: sie sitzt bis zu
   hundertmal untereinander, und die Zeile darunter hebt sich beim Überfahren ohnehin
   schon ab (tables.css). Deshalb nur Rahmen und Grund eine Spur kräftiger als die Zeile
   plus ein dunkleres Chevron, kein Farbwechsel an den Gliedern selbst: die tragen
   Status, und den darf ein Mauszeiger nicht umdeuten. */
button.flow:hover { background: var(--surface); border-color: var(--border-2); }
button.flow:hover .flow-caret { color: var(--fg); }
button.flow:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Die Aufklapp-Marke. Ein Icon, zwei Zustände: gezeichnet ist das Chevron nach rechts,
   und `aria-expanded="true"` dreht es per Transformation nach unten. Zwei ausgetauschte
   Symbole wären dieselbe Aussage in zwei Bildern — und die Drehung zeigt zusätzlich die
   Richtung, in die sich die Zeile öffnet. Der Zustand hängt am Attribut, das ohnehin
   gesetzt sein MUSS, damit die Sache für Screenreader stimmt; ein zweites Klassen-Flag
   könnte davon abweichen. Kleiner als `.icon` (1rem): neben 6px hohen Gliedern wäre ein
   volles Icon das Lauteste in der Zelle. */
.flow-caret {
  width: .8rem; height: .8rem; margin-left: .15rem;
  color: var(--muted); transition: transform .15s ease;
}
button.flow[aria-expanded="true"] .flow-caret { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .flow-caret { transition: none; } }

/* Farblegende zur Kette (Werkzeugleiste der Transaktionsliste). Sie erklärt nur, sie
   filtert nicht — deshalb eine Liste und kein Knopf. Die Muster sind echte `.flow-step`
   mit denselben Zustandsklassen und damit denselben Token wie die Balken; ein Punkt in
   derselben Farbe sähe aus wie eine andere Sache. `flex-wrap` ist Pflicht: die Leiste
   trägt daneben Filter, Zähler und Badge, und bei 800px muss sie umbrechen dürfen,
   statt der Seite waagrechten Scroll zu geben. */
.flow-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem;
  margin: 0; padding: 0; list-style: none;
  font-size: .75rem; color: var(--muted);
}
.flow-legend li { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
/* In der Kette teilen sich die Glieder die Breite (`flex: 1 1 0`); als Muster braucht
   das Stück ein festes Mass, sonst schrumpft es auf null. */
.flow-legend .flow-step { flex: none; width: 14px; }

/* Farbe ist hier Statuskodierung, nicht Schmuck — jedes Glied trägt seinen Zustand
   zusätzlich im `title`, und der Grund steht im Klartext in der Spalte daneben. */
.flow-step { flex: 1 1 0; height: 6px; border-radius: 999px; background: var(--border-2); }
.flow-step.is-done { background: var(--success); }
.flow-step.is-waiting { background: var(--warning); }
.flow-step.is-stuck { background: var(--error); }
/* „hier kommt nichts mehr" (actionable: false — Geldeingang, Storno, wartet auf den
   nächsten Lauf): gedeckt statt gelb. Gelb behauptete einen Rückstand, den es nicht
   gibt — dieselbe Unterscheidung, die die KPI-Zeile trifft. */
.flow-step.is-none { background: var(--border-2); opacity: .5; }

/* Ein Button, der wie Fliesstext aussieht — für „Filter aufheben" mitten im Satz.
   Er ist also ein Fliesstext-Link und folgt dessen Regeln (base.css `a`), nicht denen
   des Datenbereichs: dauerhaft unterstrichen, damit ihn auch erkennt, wer die Farbe
   nicht sieht (WCAG 1.4.1), und in `--brand-hover` statt `--brand` — kleiner roter
   Text auf Weiss reisst mit dem hellen Rot AA (design.md §7). */
.linklike {
  padding: 0; background: none; border: none;
  color: var(--brand-hover); font-size: inherit; font-weight: inherit;
  text-decoration: underline; cursor: pointer;
}
.linklike:hover:not(:disabled) { background: none; color: var(--brand-active); }

/* Säulendiagramm — HTML/CSS statt SVG (Begründung in scripts/charts.js). Höhen sind
   Prozent der Plot-Box, damit skaliert es mit der Kartenbreite. */
.chart-block { margin-top: 1.5rem; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.chart-head h4 { margin: 0 0 .5rem; font-size: .95rem; }
.chart-head button { padding: .25rem .6rem; font-size: .7rem; }

.chart { margin: 0; --plot-height: 180px; }
.chart-body { display: flex; gap: .5rem; }
.chart-yaxis { position: relative; flex: none; width: 3.5rem; height: var(--plot-height); }
.chart-axis {
  position: absolute; right: 0; transform: translateY(50%);
  font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.chart-plot { position: relative; flex: 1; height: var(--plot-height); min-width: 0; }
.chart-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--border); }
.chart-grid.is-baseline { border-top-color: var(--border-2); }
.chart-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.chart-col {
  position: relative; flex: 1; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
}
.chart-col.is-hover { background: var(--surface-2); }
/* Schmale Marke, flach auf der Achse: nur die Oberkante ist gerundet. */
.chart-fill {
  width: min(30px, 55%); min-height: 2px;
  background: var(--brand); border-radius: 4px 4px 0 0;
}
/* Nur der Höchstwert wird direkt beschriftet — eine Zahl über jeder Säule ist Rauschen. */
.chart-peak {
  position: absolute; margin-bottom: .3rem;
  /* Deckt Gitterlinie bzw. Achsenbeschriftung ab, wenn der Höchstwert ganz links steht. */
  background: var(--surface); padding: 0 .15rem;
  font-size: .7rem; font-weight: 600; color: var(--heading);
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.chart-ticks { display: flex; margin: .35rem 0 0 4rem; }
.chart-ticks span { flex: 1; text-align: center; font-size: .7rem; color: var(--muted); }
.chart-tip {
  position: absolute; z-index: 5;
  transform: translate(-50%, 0); margin-bottom: 1.6rem;
  display: flex; flex-direction: column;
  background: var(--heading); color: #fff;
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: .35rem .55rem; font-size: .82rem; line-height: 1.35;
  white-space: nowrap; pointer-events: none;
}
.chart-tip span { font-size: .74rem; color: rgba(255, 255, 255, .72); }

/* Ranglisten (Karte / Konto / Händler) — Länge lässt sich vergleichen, Kreissegmente nicht. */
.stats-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.75rem; }
.stats-panel h4 { margin: 0 0 .15rem; font-size: .95rem; }
.stats-panel > .muted { margin: 0 0 .75rem; }
.barlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.barlist-head { display: flex; justify-content: space-between; gap: .75rem; font-size: .85rem; }
.barlist-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlist-value { flex: none; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; }
.barlist-track { height: 8px; margin: .25rem 0 .2rem; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.barlist-fill { height: 100%; min-width: 2px; background: var(--brand); border-radius: 0 4px 4px 0; }
.barlist-meta { display: flex; justify-content: space-between; gap: .75rem; font-size: .74rem; color: var(--muted); }
.barlist-meta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }