/* Die Farben der Diagramme — als Variablen, nicht in jedem Skript neu.
 *
 * # Warum diese Werte und keine anderen
 *
 * Sie sind geprüft, nicht ausgesucht. Ein Prüfprogramm rechnet fünf Dinge
 * nach: Helligkeitsband, Farbsättigung, Unterscheidbarkeit für Menschen mit
 * Farbsehschwäche (Deuteranopie, Tritanopie), Unterscheidbarkeit für normales
 * Sehen und Kontrast gegen den Untergrund. Alles bestanden — die
 * schlechteste Nachbarpaarung liegt bei ΔE 9,2 (Ziel ab 8) und bei 27,6 für
 * normales Sehen (Untergrenze 15).
 *
 * Was das praktisch heißt: Wer Rot und Grün nicht auseinanderhalten kann —
 * etwa jeder zwölfte Mann — liest diese Diagramme trotzdem. Eine nach Gefühl
 * gewählte Palette schafft das fast nie.
 *
 * # Drei Farben, nicht acht
 *
 * Mehr Serien heißen nicht mehr Farben. Ab der vierten Farbe wird die
 * Unterscheidung unter Farbsehschwäche unzuverlässig; ab der vierten Serie
 * gehören Werte direkt an die Marke oder in eine Tabelle. Wo hier vier
 * Kategorien nötig wären, ist die Antwort eine Tabelle — keine erfundene
 * vierte Farbe.
 *
 * # Aqua trägt Pflichten
 *
 * Slot 3 liegt im Hellmodus unter 3:1 Kontrast zum Untergrund. Das ist
 * zulässig, solange die Zahl auch als Text erscheint — jede Ansicht, die
 * diese Farbe benutzt, hat die Tabelle daneben.
 *
 * # Der Verlauf ist eine Farbe, nicht ein Regenbogen
 *
 * Wo Größen verglichen werden (Trichterstufen, Ranglisten), gilt: eine
 * Farbe, dunkler heißt mehr. Verschiedene Farben für verschiedene Größen
 * derselben Sache behaupten einen Unterschied in der Art, wo nur einer im
 * Umfang ist.
 */

.viz-root {
  --surface-1: #fcfcfb;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --grid: #e6e5e1;

  /* Kategorial: verschiedene Dinge. Feste Reihenfolge, nie durchrotiert —
     eine Serie behält ihre Farbe, auch wenn eine andere wegfällt. */
  --series-1: #2a78d6; /* blau */
  --series-2: #eb6834; /* orange */
  --series-3: #1baf7a; /* aqua — braucht sichtbare Werte, siehe oben */

  /* Sequenziell: dieselbe Sache in verschiedener Menge. Eine Farbe, fünf
     Stufen, dunkel = viel. Für Trichter und Ranglisten. */
  --seq-1: #cddff5;
  --seq-2: #97bfeb;
  --seq-3: #5f9ee0;
  --seq-4: #2a78d6;
  --seq-5: #1b56a0;

  /* Zustand: reserviert. Nie als „vierte Serie" zweckentfremdet, und immer
     mit Wort oder Zeichen daneben — Farbe allein ist keine Aussage. */
  --gut: #008300;
  --schlecht: #e34948;
  /* Was Zusammenhang zeigt, aber nicht die Aussage ist. */
  --zurueckhaltend: #9c9a94;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="corporate"]):not([data-theme="light"])) .viz-root {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --grid: #35342f;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --seq-1: #17304d;
    --seq-2: #1d4a7d;
    --seq-3: #2767ab;
    --seq-4: #3987e5;
    --seq-5: #7fb4ef;
    --gut: #4aa74a;
    --schlecht: #e66767;
    --zurueckhaltend: #6f6d67;
  }
}

/* Der Umschalter der Ansicht schlägt die Einstellung des Betriebssystems —
   in beide Richtungen. */
:root[data-theme="dark"] .viz-root {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --grid: #35342f;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --seq-1: #17304d;
  --seq-2: #1d4a7d;
  --seq-3: #2767ab;
  --seq-4: #3987e5;
  --seq-5: #7fb4ef;
  --gut: #4aa74a;
  --schlecht: #e66767;
  --zurueckhaltend: #6f6d67;
}

/* Die Diagrammfläche selbst. Höhe im Markup, damit ein Diagramm nicht auf
   null Pixel zusammenfällt, bevor das Skript läuft. */
.viz {
  width: 100%;
}

/* Tabelle statt Diagramm — die Pflicht aus dem Kontrast-Hinweis oben und
   gleichzeitig der Weg für Vorlesesoftware. Aufklappbar statt daneben, damit
   sie die Seite nicht verdoppelt. */
.viz-tabelle summary {
  cursor: pointer;
  font-size: 0.75rem;
  opacity: 0.6;
}
.viz-tabelle summary:hover {
  opacity: 1;
}

/* ── Die Live-Sicht ────────────────────────────────────────────────────────

   Zwei Signale, mehr nicht: dass die Seite lebt, und dass ein Eintrag neu ist.
   Alles darüber hinaus (blinkende Zahlen, wandernde Balken) zieht den Blick
   auf die Bewegung statt auf die Sache.

   Beide Animationen halten sich an `prefers-reduced-motion`. Das ist keine
   Formalie: Ein dauerhaft pulsierender Punkt im Blickfeld ist für manche
   Menschen der Grund, eine Seite zu schließen. Ohne Bewegung bleibt der Punkt
   sichtbar — er hört nur auf zu pulsieren. */
.live-punkt {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: currentColor;
  animation: live-puls 2s ease-in-out infinite;
}

@keyframes live-puls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* Eine Zeile, die seit dem letzten Blick dazugekommen ist. Der Farbverlauf
   läuft EINMAL und bleibt dann als leiser Rand stehen: Ein Ereignis von vor
   drei Minuten ist neu, aber es soll nicht dauerhaft blinken. */
.zeile-frisch {
  animation: frisch-auf 2.5s ease-out 1;
  border-left: 3px solid var(--gut, #4aa74a);
}

@keyframes frisch-auf {
  0%   { background-color: color-mix(in srgb, var(--gut, #4aa74a) 22%, transparent); }
  100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .live-punkt { animation: none; }
  .zeile-frisch { animation: none; }
}