/* =========================================================================
   DAS GEMEINSAME BLATT FUER DIE GRAFIK
   =========================================================================

   Emil, 10.08.2026: "Looks sollen 1:1 Matchen zwischen Software und admin."
   Fuer die Balkengrafik war das bis heute nicht einloesbar, weil sie an
   zwei Orten zweimal gebaut ist:

       verlauf.js   (account.html, uebersicht.html)
           schreibt die Farbe INS SVG-ATTRIBUT:
           stroke="var(--linie-leiste)"  fill="var(--tinte-3)"
       admin.js     (admin.html)
           setzt KLASSEN: class="vl-raster"  class="vl-massstab"

   Der Klassenweg ist der einzige, auf dem ein gemeinsames Blatt ueberhaupt
   greifen kann - eine Farbe im Attribut laesst sich von aussen nicht
   aendern. Deshalb gilt hier der Klassensatz, und beide Zeichner setzen
   dieselben Klassen.

   WARUM EINE ZWISCHENSCHICHT `--v-*` UND NICHT DIREKT DIE HAUSNAMEN:
   Die zwei Seiten laden verschiedene Blaetter, und die Namen darin
   decken sich nicht. Gemessen am 10.08.2026:

       Zweck        Software (app-neu.css)      Admin (bp2.css)
       Balken       --gruen-hell  42% 0.045     --green-lit  58% 0.075
       Meta-Text    --tinte-3     55% 0.009     --ink-3      52% 0.010
       volles Gruen --gruen       #2e4f35       --green      #2e4f35

   Nur das volle Gruen war schon gleich. Der Balken unterschied sich um
   16 Punkte Helligkeit - dieselbe Grafik, sichtbar zwei Farben. Wer die
   Hausnamen direkt benutzt, bekommt genau das zurueck: jede Seite malt in
   ihrem eigenen Ton und beide sind "richtig".

   Die Kette `var(--gruen-hell, oklch(...))` loest das ohne Verzweigung
   nach Seite: wo die Hausvariable existiert, gilt sie - die Grafik folgt
   dem Haus, wenn Emil das Gruen aendert. Wo sie fehlt (Admin), greift
   derselbe Wert als Rueckfall. Ein Ton, zwei Seiten.

   Die SOFTWARE ist dabei die Vorlage, nicht das Admin - so herum lautet
   Emils Satz. Deshalb steht die Beschriftung auf 11px (verlauf.js) und
   nicht auf 10 (admin.js).

   WAS DAS BLATT NICHT VEREINHEITLICHT, UND WARUM NICHT:
   Die BALKENFARBE. Die zwei Zeichner malen naemlich nicht dieselbe
   Grafik - `verlauf.js` stapelt Segmente und nimmt den Ton je Segment aus
   den DATEN (`t.ton`), `admin.js` zeichnet einfache Balken in einer Farbe.
   Wer beide auf einen Ton zwingt, loescht bei der gestapelten Grafik die
   Aussage, wofuer die Anteile stehen. Gemeinsam ist das Geruest ringsum -
   Raster, Grundlinie, Beschriftung, Null-Marke - und genau das steht hier.
   `--v-balken` gilt fuer den einfarbigen Balken; die gestapelte Grafik
   ruehrt es nicht an.

   Gegenprobe: `grafikblatt.py` liest auf beiden Seiten `getComputedStyle`
   fuer jede `vl-*`-Klasse und vergleicht sie paarweise. Ein Blatt, das
   niemand nachmisst, behauptet die Gleichheit nur.
   ========================================================================= */

:root {
  /* Balken: der ruhige Grundton. */
  --v-balken:      var(--gruen-hell, oklch(42% 0.045 152));
  /* Der hervorgehobene Balken - heute, oder der, auf dem die Maus steht. */
  --v-balken-an:   var(--gruen, #2e4f35);
  /* Beschriftung: Massstab, Datum, Mittelwert. */
  --v-text:        var(--tinte-3, oklch(55% 0.009 155));
  /* Die Grundlinie traegt die Balken und ist die kraeftigere der zwei. */
  --v-grundlinie:  var(--linie, oklch(93.5% 0 155));
  /* Das Raster liegt dahinter und darf nicht mit ihr verwechselt werden. */
  --v-raster:      var(--linie-zart, oklch(95% 0 155));
  /* Ein Tag ohne Erfassung: sichtbar, aber nicht als Wert lesbar. */
  --v-leer:        var(--tinte-3, oklch(55% 0.009 155));
  --v-leer-deckung: 0.35;
}

/* ---- Die Flaeche ------------------------------------------------------ */
.vl-huelle { position: relative; width: 100%; }
.vl-svg { display: block; overflow: visible; }

/* ---- Balken ----------------------------------------------------------- */
.vl-balken {
  fill: var(--v-balken);
  cursor: pointer;
  transition: fill 0.15s ease, opacity 0.15s ease;
}
.vl-balken.heute { fill: var(--v-balken-an); }
/* Beim Ueberfahren treten ALLE zurueck und der eine tritt hervor - sonst
   muss das Auge den einen unter zwanzig gleich hellen suchen. */
.vl-huelle:hover .vl-balken { opacity: 0.35; }
.vl-balken.an,
.vl-huelle:hover .vl-balken.an { fill: var(--v-balken-an); opacity: 1; }

/* Ein Tag ohne Erfassung ist ein Strich auf der Grundlinie, kein Balken der
   Hoehe null: "nichts erfasst" saehe sonst aus wie "diesen Tag gibt es
   nicht". */
.vl-null { fill: var(--v-leer); opacity: var(--v-leer-deckung); cursor: pointer; }
.vl-null.an { fill: var(--v-balken-an); opacity: 0.8; }

.vl-balken:focus-visible,
.vl-null:focus-visible { outline: 2px solid var(--v-balken-an); outline-offset: 2px; }

/* ---- Linien ----------------------------------------------------------- */
.vl-grundlinie { stroke: var(--v-grundlinie); stroke-width: 1; }
.vl-raster { stroke: var(--v-raster); stroke-width: 1; }
/* Gestrichelt und blasser: der Mittelwert ist eine Hilfslinie, kein Wert
   der Reihe. Durchgezogen sieht er aus wie ein weiterer Messpunkt. */
.vl-schnitt { stroke: var(--v-text); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.55; }

/* ---- Beschriftung ----------------------------------------------------- */
.vl-massstab,
.vl-datum,
.vl-schnitt-text {
  fill: var(--v-text);
  font-variant-numeric: tabular-nums;
}
.vl-massstab { font-size: 11px; text-anchor: end; }
.vl-datum { font-size: 11px; text-anchor: middle; }
.vl-schnitt-text { font-size: 9.5px; text-anchor: end; }