/* =============================================================================
   EmKater WWS — Diagramme und Kennzahlen

   Gehoert zu src/Support/Diagramm.php (SVG) und templates/auswertung/statistik.php.

   -----------------------------------------------------------------------------
    Die Reihenfarben sind nicht ausgesucht, sondern geprueft
   -----------------------------------------------------------------------------

   Acht Reihenfarben in fester Reihenfolge. Die Reihenfolge ist der eigentliche
   Schutz: Farben werden Reihe fuer Reihe von oben vergeben und nie im Kreis
   wiederverwendet. Benachbarte Slots muessen sich auch dann unterscheiden, wenn
   jemand Rot und Gruen nicht auseinanderhaelt — und rund acht Prozent der
   Maenner tun das nicht.

   Geprueft wurde jeder Satz gegen die Flaeche, auf der er hier wirklich steht
   (hell #ffffff, dunkel #1e231c), nicht gegen eine Beispielflaeche:

     Helligkeitsband     alle 8 im Band (hell OKLCH L 0,43–0,77; dunkel 0,48–0,67)
     Buntheit            alle 8 ueber der Untergrenze C >= 0,10
     Farbfehlsichtigkeit schlechtestes Nachbarpaar ΔE 8,4 (Ziel >= 8)
                         — hell Aqua/Gelb 9,1, dunkel Aqua/Gelb 8,4
                         (Protanopie/Deuteranopie, Machado u. a. 2009, Staerke 1,0)
     Normalsichtigkeit   schlechtestes Nachbarpaar ΔE 19,3 (Untergrenze 15)
     Flaechenkontrast    dunkel alle 8 ueber 3:1; hell drei Stufen darunter
                         (Magenta 2,69, Gelb 2,17, Aqua 2,82)

   Der letzte Punkt ist der einzige Abstrich, und er ist gedeckt: unter jedem
   Diagramm dieser Seite steht dieselbe Zahlenreihe als Tabelle, und jede Flaeche
   traegt einen Zeigerhinweis mit ihrem Wert. Farbe ist damit nirgends der
   einzige Traeger einer Aussage.

   Die drei fuehrenden Stufen (Gruen, Blau, Magenta) halten die Pruefung auch
   ueber *alle* Paare statt nur ueber Nachbarn (ΔE 11,6): sie sind deshalb die
   Wahl, wenn Flaechen nicht nur nebeneinander, sondern beliebig verteilt
   stehen. Ab der vierten Reihe gilt das nicht mehr — dann gehoert die Grafik
   geteilt, nicht die Palette erweitert.

   Slot 1 ist das Markengruen des Hauses, in der Stufe, die im Band liegt
   (#4a7f00 statt #5a9c00). Die uebrigen sieben stammen aus einem geprueften
   Standardsatz. Wer eine Farbe aendert, aendert die Pruefung — dann bitte neu
   durchrechnen und die Zahlen oben ersetzen.
   ============================================================================= */

:root {
  /* Reihenfarben (Identitaet) */
  --dia-1: #4a7f00;   /* Markengruen */
  --dia-2: #2a78d6;   /* Blau       */
  --dia-3: #e87ba4;   /* Magenta    */
  --dia-4: #eda100;   /* Gelb       */
  --dia-5: #1baf7a;   /* Aqua       */
  --dia-6: #eb6834;   /* Orange     */
  --dia-7: #4a3aa7;   /* Violett    */
  --dia-8: #e34948;   /* Rot        */

  /* Zuruecktretend: alles, was Zusammenhang zeigt, aber nicht die Aussage ist
     (Rumpfjahr, Vergleichswerte, Hintergrundreihen). */
  --dia-neutral: #b9beb2;

  /* Verlaufsstufen fuer die Saisonmatrix: eine Farbe, hell nach dunkel.
     Kein Regenbogen — ein Farbwechsel im Verlauf liest sich als Grenze, die
     es in den Daten nicht gibt.

     Fuenf Stufen, nicht sieben. Der Grund steht im Dunkelthema: zwischen
     Helligkeit 0,12 und 0,25 (relative Leuchtdichte) erreicht *weder* helle
     noch dunkle Schrift die geforderten 4,5:1. Mit sieben Stufen faellt eine
     genau dorthin und traegt ihre Zahl nur noch mit 3,8:1. Fuenf Stufen lassen
     sich um diesen Bereich herumlegen; der schlechteste Textkontrast der
     Matrix liegt damit bei 6,2:1 in beiden Themen. Fuenf Klassen reichen fuer
     eine Saisonmatrix auch voellig — die genaue Zahl steht ohnehin im Feld. */
  --dia-s0: #ffffff;
  --dia-s1: #eef5e0;
  --dia-s2: #d3e7ae;
  --dia-s3: #aed277;
  --dia-s4: #79ae2e;
  --dia-s5: #3f6d00;

  /* Diagrammchrome */
  --dia-flaeche:     #ffffff;
  --dia-ink:         #1b1d1a;
  --dia-ink-leise:   #5b6157;
  --dia-gitter:      #e6eadf;
  --dia-grundlinie:  #c2c8b9;
}

:root[data-theme="dark"] {
  --dia-1: #63a800;
  --dia-2: #3987e5;
  --dia-3: #d55181;
  --dia-4: #c98500;
  --dia-5: #199e70;
  --dia-6: #d95926;
  --dia-7: #9085e9;
  --dia-8: #e66767;

  --dia-neutral: #6a7263;

  /* Im Dunkelthema laeuft der Verlauf andersherum: nahe null liegt an der
     Flaeche, hoch ist hell. Ein von weiss ausgehender Verlauf leuchtet im
     Dunkeln genau dort am staerksten, wo nichts passiert ist. */
  --dia-s0: #1e231c;
  --dia-s1: #242c1c;
  --dia-s2: #334619;
  --dia-s3: #4a6b17;
  --dia-s4: #77ab0a;
  --dia-s5: #9ad130;

  --dia-flaeche:     #1e231c;
  --dia-ink:         #e7eae2;
  --dia-ink-leise:   #a6ad9d;
  --dia-gitter:      #2f362b;
  --dia-grundlinie:  #49513f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dia-1: #63a800;
    --dia-2: #3987e5;
    --dia-3: #d55181;
    --dia-4: #c98500;
    --dia-5: #199e70;
    --dia-6: #d95926;
    --dia-7: #9085e9;
    --dia-8: #e66767;

    --dia-neutral: #6a7263;

    --dia-s0: #1e231c;
    --dia-s1: #242c1c;
    --dia-s2: #334619;
    --dia-s3: #4a6b17;
    --dia-s4: #77ab0a;
    --dia-s5: #9ad130;

    --dia-flaeche:     #1e231c;
    --dia-ink:         #e7eae2;
    --dia-ink-leise:   #a6ad9d;
    --dia-gitter:      #2f362b;
    --dia-grundlinie:  #49513f;
  }
}

/* --- Rahmen und Zeichenflaeche --------------------------------------------- */

/* Feste Zeichenbreite (880) in einem Rahmen, der sich schieben laesst — wie
   die breiten Tabellen des Hauses. Eine mitwachsende SVG-Flaeche skaliert ihre
   Schrift mit und wird auf schmalen Geraeten unleserlich. */
.dia-rahmen {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  margin: 2px 0 0;
}
.dia-rahmen:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

svg.dia { display: block; font-family: var(--schriftfamilie); }

svg.dia .dia-gitter     { stroke: var(--dia-gitter); stroke-width: 1; }
svg.dia .dia-grundlinie { stroke: var(--dia-grundlinie); stroke-width: 1; }
svg.dia .dia-achse      { fill: var(--dia-ink-leise); font-size: 11px; }
svg.dia .dia-name       { fill: var(--dia-ink); font-size: 12px; }
svg.dia .dia-wert       { fill: var(--dia-ink); font-size: 11.5px; font-weight: 600;
                          font-variant-numeric: tabular-nums; }

/* Zeigen genuegt: die Flaeche hebt sich, ohne dass ein Rahmen dazukommt.
   Rein gestalterisch — die Zahl steht im Titel des Elements und in der
   Tabelle darunter, nicht erst im Hover. */
svg.dia .dia-mark          { transition: opacity .12s ease-out; }
svg.dia:hover .dia-mark    { opacity: .55; }
svg.dia .dia-mark:hover    { opacity: 1; }

.dia-leer {
  color: var(--schrift-hell); font-size: 13px; font-style: italic;
  padding: 14px 0; margin: 0;
}

/* --- Legende --------------------------------------------------------------- */

/* Ab zwei Reihen immer vorhanden. Die Beschriftung traegt nie die Reihenfarbe —
   ein gelbes Wort auf weiss liest niemand; der Punkt daneben traegt sie. */
.dia-legende {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin: 8px 0 2px; padding: 0; list-style: none;
  font-size: 12px; color: var(--schrift-hell);
}
.dia-legende li { display: flex; align-items: center; gap: 6px; }
.dia-legende .lg-punkt {
  width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto;
  background: var(--dia-1);
}
.dia-legende .lg-2 { background: var(--dia-2); }
.dia-legende .lg-3 { background: var(--dia-3); }
.dia-legende .lg-4 { background: var(--dia-4); }
.dia-legende .lg-5 { background: var(--dia-5); }
.dia-legende .lg-6 { background: var(--dia-6); }
.dia-legende .lg-7 { background: var(--dia-7); }
.dia-legende .lg-8 { background: var(--dia-8); }
.dia-legende .lg-neutral { background: var(--dia-neutral); }

/* --- Diagrammkarte --------------------------------------------------------- */

/* Die Karte ist so breit wie ihr Diagramm, nicht so breit wie der Bildschirm.
   Sonst stünde in einer 1.400 px breiten Karte ein 880 px breites Diagramm und
   daneben 500 px Nichts — das sieht nach Fehler aus. 880 + zweimal 16 Polsterung.
   Karten ohne SVG (Ranglistentabellen) bekommen die Kappe im Template
   ausdrücklich abgenommen. */
.dia-karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 14px 16px 12px;
  margin-bottom: 14px;
  /* 880 Zeichenfläche + zweimal 16 Polsterung + zweimal 1 Rahmen. Fehlen die
     beiden Rahmenpixel, schiebt jedes Diagramm um genau 2 px — sichtbar als
     Rollbalken unter einer Grafik, die eigentlich passt. */
  max-width: 914px;
}
.dia-karte.breit { max-width: none; }
.dia-karte > h3 {
  margin: 0 0 2px; font-size: 14px;
  display: flex; align-items: center; gap: 7px;
}
.dia-karte > .dia-unter {
  margin: 0 0 6px; color: var(--schrift-hell); font-size: 12.5px;
  line-height: 1.45; max-width: 80ch;
}
.dia-karte > .dia-fuss {
  margin: 8px 0 0; color: var(--schrift-hell); font-size: 12px;
  line-height: 1.45; max-width: 80ch;
}

/* Zwei Diagramme nebeneinander, sobald Platz ist. Zwei Groessen auf einer
   Achse waeren falsch — zwei Achsen nebeneinander sind richtig.

   Feste Spaltenbreite (520 Zeichenflaeche + 32 Polsterung + 2 Rahmen) statt `1fr`: die
   Spalte muss zur Zeichenbreite passen, sonst schiebt jedes Diagramm in seinem
   eigenen Kasten. Reicht der Platz nicht fuer zwei Spalten, faellt `auto-fit`
   von selbst auf eine zurueck. */
.dia-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, 554px);
  justify-content: start;
  gap: 14px;
  margin-bottom: 14px;
}
.dia-paar .dia-karte { margin-bottom: 0; max-width: 554px; }

@media (max-width: 620px) {
  /* Auf dem Telefon passt keine 520er Flaeche mehr — die Spalte darf dann
     schmaler sein als das Diagramm, das sich dafuer seitlich schieben laesst. */
  .dia-paar { grid-template-columns: 1fr; }
  .dia-paar .dia-karte { max-width: none; }
}

/* --- Zahlensicht zu jedem Diagramm ----------------------------------------- */

/* Jede Grafik hat ihre Tabelle. Nicht als Zugestaendnis, sondern weil man
   Zahlen ablesen, kopieren und vorlesen koennen muss. */
.dia-zahlen { margin-top: 10px; }
.dia-zahlen > summary {
  cursor: pointer; font-size: 12px; color: var(--schrift-hell);
  padding: 2px 0; width: fit-content;
}
.dia-zahlen > summary:hover { color: var(--schrift); }
.dia-zahlen > summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.dia-zahlen[open] > summary { margin-bottom: 6px; }

/* --- Kennzahlen ------------------------------------------------------------ */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.kennzahl-kachel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 11px 13px;
}
.kennzahl-kachel .kz-titel {
  color: var(--schrift-hell); font-size: 12px;
  display: block; margin-bottom: 3px;
}
/* Grosse Zahlen in Proportionalziffern: `tabular-nums` gibt jeder Ziffer die
   Breite der Null, und dann steht "121" in einer Kachel auseinandergezogen.
   Tabellenspalten weiter unten bekommen es sehr wohl. */
.kennzahl-kachel .kz-wert {
  font-size: 21px; font-weight: 700; letter-spacing: -.015em;
  line-height: 1.15; display: block;
}
.kennzahl-kachel .kz-zusatz {
  color: var(--schrift-hell); font-size: 11.5px;
  display: block; margin-top: 2px; line-height: 1.35;
}

/* Die eine Zahl, mit der die Seite anfaengt. Genau eine je Ansicht. */
.leitzahl {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--gruen);
  border-radius: var(--radius-gross);
  padding: 16px 20px;
  margin-bottom: 14px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px;
}
.leitzahl .lz-wert {
  font-size: 46px; font-weight: 700; letter-spacing: -.025em; line-height: 1.05;
}
.leitzahl .lz-titel { font-size: 14px; color: var(--schrift-hell); }
.leitzahl .lz-text {
  flex: 1 1 300px; color: var(--schrift-hell); font-size: 12.5px; line-height: 1.5;
  min-width: 260px;
}

/* Veraenderung gegenueber dem Vorjahr. Nie Farbe allein: das Vorzeichen steht
   im Text und wird mitgelesen und mitgedruckt. */
.delta { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.delta-auf { color: var(--gruen-text); }
.delta-ab  { color: var(--rot-text); }
.delta-neutral { color: var(--schrift-hell); }

/* --- Saisonmatrix (Jahr x Monat) ------------------------------------------- */

/* Als Tabelle, nicht als SVG: so bleibt jede Zelle Text — kopierbar,
   vorlesbar, durchsuchbar. Die Farbe ordnet ein, die Zahl steht drin. */
.matrix { border-collapse: separate; border-spacing: 2px; font-size: 11.5px; }
.matrix th {
  font-weight: 600; color: var(--schrift-hell); font-size: 11px;
  padding: 2px 5px; text-align: center; white-space: nowrap;
}
.matrix th[scope="row"] { text-align: right; font-variant-numeric: tabular-nums; }
.matrix td {
  padding: 5px 7px; text-align: right; border-radius: 3px;
  font-variant-numeric: tabular-nums; min-width: 52px;
  color: var(--dia-ink);
}
/* Schriftfarbe je Stufe, nicht pauschal: sie richtet sich nach der Helligkeit
   der Flaeche, auf der sie steht. Im Hellthema wird die Flaeche nach oben hin
   dunkler, im Dunkelthema heller — der Umschlagpunkt liegt deshalb an
   verschiedenen Stellen. Geprueft: schlechtester Wert 6,2:1 in beiden Themen. */
.matrix td.s0 { background: var(--dia-s0); color: var(--schrift-hell); }
.matrix td.s1 { background: var(--dia-s1); color: #1b1d1a; }
.matrix td.s2 { background: var(--dia-s2); color: #1b1d1a; }
.matrix td.s3 { background: var(--dia-s3); color: #1b1d1a; }
.matrix td.s4 { background: var(--dia-s4); color: #10190a; }
.matrix td.s5 { background: var(--dia-s5); color: #ffffff; }

:root[data-theme="dark"] .matrix td.s1,
:root[data-theme="dark"] .matrix td.s2,
:root[data-theme="dark"] .matrix td.s3 { color: #e7eae2; }
:root[data-theme="dark"] .matrix td.s4,
:root[data-theme="dark"] .matrix td.s5 { color: #10190a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .matrix td.s1,
  :root:not([data-theme="light"]) .matrix td.s2,
  :root:not([data-theme="light"]) .matrix td.s3 { color: #e7eae2; }
  :root:not([data-theme="light"]) .matrix td.s4,
  :root:not([data-theme="light"]) .matrix td.s5 { color: #10190a; }
}
.matrix td.leer { background: transparent; color: var(--schrift-hell); }
/* Jahressumme am Zeilenende - eine Zelle, kein zweiter Zeilenkopf. */
.matrix td.summe {
  background: transparent; font-weight: 700; color: var(--schrift);
  padding-left: 12px; white-space: nowrap;
}

/* Farbschluessel zur Matrix */
.matrix-schluessel {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--schrift-hell); margin-top: 8px;
}
.matrix-schluessel .ms-stufe {
  width: 26px; height: 11px; border-radius: 2px; display: inline-block;
}

/* --- Faktenliste ----------------------------------------------------------- */

.fakten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px; margin: 0; padding: 0; list-style: none;
}
.fakten > li {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gruen);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px; line-height: 1.45;
}
.fakten > li.achtung { border-left-color: var(--gelb); }
.fakten > li.wichtig { border-left-color: var(--rot); }
.fakten .fk-titel {
  display: block; font-size: 11.5px; color: var(--schrift-hell);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}
.fakten .fk-wert {
  display: block; font-size: 17px; font-weight: 700; line-height: 1.2;
  margin-bottom: 2px;
}
.fakten .fk-text { color: var(--schrift-hell); font-size: 12px; line-height: 1.45; }

/* --- Fliesstext der Analyse ------------------------------------------------ */

.analyse { max-width: 74ch; }
.analyse h3 { margin: 16px 0 4px; font-size: 13.5px; }
.analyse h3:first-child { margin-top: 0; }
.analyse p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.62; }
.analyse strong { font-weight: 650; }

/* --- Druck ----------------------------------------------------------------- */

@media print {
  /* Der Ausklapppfeil ist auf Papier wertlos. Das Aufklappen selbst kann CSS
     nicht: den Inhalt eines geschlossenen <details> blendet der Browser nicht
     ueber `display` aus. Das erledigt app.js vor dem Druck (beforeprint);
     ohne JavaScript werden die Diagramme ohne ihre Tabellen gedruckt. */
  .dia-zahlen > summary { display: none; }
  .dia-karte, .kennzahl-kachel, .fakten > li, .leitzahl {
    break-inside: avoid; box-shadow: none;
  }
  .dia-rahmen { overflow: visible; }
  svg.dia .dia-mark, svg.dia:hover .dia-mark { opacity: 1; }
}

/* --- Erzwungene Farben (Windows-Kontrastmodus) ----------------------------- */

@media (forced-colors: active) {
  /* Hier gibt es keine Reihenfarben mehr. Das ist kein Schaden, weil unter
     jedem Diagramm die Tabelle steht; die Flaechen bekommen wenigstens
     Umrisse, damit die Form erhalten bleibt. */
  svg.dia path, svg.dia rect, svg.dia circle { forced-color-adjust: none; }
  .matrix td { border: 1px solid CanvasText; }
}

/* =============================================================================
   Nachtrag: die Kollision `.kennzahlen` ist aufgeloest (GESTALTUNG 5.3)
   -----------------------------------------------------------------------------
   Weiter oben stand `.kennzahlen` ein zweites Mal - der Name gehoert dem
   Baustein "Kennzahl" aus layout.css. Weil dieses Blatt als letztes geladen
   wird, hat die Auswertungsvariante bisher auf JEDER Seite gewonnen: 25
   Vorlagen, von der Startseite bis zur Kassenuebersicht, bekamen 168 px
   Mindestbreite, 10 px Luecke und 14 px Abstand statt der Werte aus der Leiter.
   Gesehen hat das niemand, weil die Unterschiede klein sind - falsch war es
   trotzdem, und beim naechsten Zug an einer Schraube waere es aufgefallen.

   Die Kachelreihe dieser Seite heisst deshalb `.kz-kacheln`
   (templates/auswertung/statistik.php), und `.kennzahlen` bekommt hier die
   Werte aus layout.css zurueck. Sobald die Regel weiter oben entfernt werden
   darf, faellt dieser Nachtrag mit ihr weg.
   ============================================================================= */

.kennzahlen {
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-4);
}

/* Kachelreihe der Auswertung: etwas breiter als eine Kennzahl, weil in jeder
   Kachel eine Zusatzzeile mit ganzen Saetzen steht. */
.kz-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-4);
}