/* Virtuelle Karte - Farben und Anordnung.
   ==========================================================================

   DIE FARBFRAGE, UND WARUM SIE HIER DIE EIGENTLICHE ARBEIT IST.

   Verlangt waren "3 bis 5 Pastellabstufungen, serioes". Pastell und serioes
   sind ein Widerspruch, sobald man bunt wird: Diese Software liegt vor
   Gericht, und eine Karte, die aussieht wie ein Kinderspiel, beschaedigt
   genau das. Der Ausweg ist nicht weniger Farbe, sondern Farbe MIT
   BEDEUTUNG - und zwar mit genau einer:

       Die Abstufung sagt, wie alt die letzte erfasste Meldung zum Objekt ist.

   Fuenf Werte, vier davon eine Reihe (heute - diese Woche - dieser Monat -
   laenger her) und einer neutral daneben (keine Meldung im Zeitfenster).
   Keine Regenbogenskala: Eine geordnete Aussage braucht eine geordnete
   Skala. Der Farbton wandert von Gruen ueber Oliv und Sand nach Ton, also
   von "frisch" nach "verwittert" - dieselbe Naturmetapher, aus der auch die
   Grundflaechen dieser Anwendung ihre Salbeitoene beziehen (styles.css).

   KEIN ROT. Rot ist in diesem Haus Alarmsprache (--critical). Ein Objekt,
   dessen letzte Meldung fuenf Wochen her ist, ist kein Alarm - es ist eine
   Beobachtung. Wer das rot faerbt, entwertet das echte Rot.

   DIE HELLIGKEIT SINKT MONOTON. Das ist der Grund, warum die Toene nicht
   alle gleich hell sind, obwohl "pastell" das nahelegen wuerde: Eine Skala,
   deren Stufen sich nur im Farbton unterscheiden, ist fuer rund acht Prozent
   der Maenner keine Skala. Nachgerechnete relative Luminanz der Fuellungen
   (hell): 78,1 - 64,4 - 52,6 - 41,5 Prozent. Nachbarschritt also 1,20:1 bis
   1,24:1, erste gegen letzte Stufe 1,79:1. Im Dunkelmodus 4,5 - 6,8 - 9,5 -
   12,5 Prozent, Nachbarschritt 1,20:1 bis 1,25:1, erste gegen letzte 1,85:1.

   UND DIE FARBE IST TROTZDEM NICHT DAS EINZIGE MITTEL (WCAG 1.4.1). Dieselbe
   Stufe steht zusaetzlich
     - in der Groesse des Punktes (4,5 / 5,5 / 6,5 / 7,5 - aelter ist
       groesser, denn was Aufmerksamkeit braucht, soll sie bekommen),
     - im gestrichelten Ring der neutralen Stufe,
     - im Wort, in der Legende und in jeder Kachel der Tafel.

   ---------------------------------------------------------------------------
   JEDER KONTRAST NACHGERECHNET (WCAG-Formel ueber die relative Luminanz,
   nicht geschaetzt). Verlangt sind 4,5:1 fuer Text und 3:1 fuer Umrisse, die
   etwas abgrenzen.

   HELL, Grundflaeche --surface-2 #f5f9f3, Landflaeche #e9ece6:
     Schrift --text-primary #14181a auf den Fuellungen
       heute 14,14:1 · Woche 11,80:1 · Monat 9,80:1 · laenger 7,92:1 ·
       keine 13,12:1                                        (alle > 4,5:1)
     Ring (Tinte) gegen die Landflaeche
       heute 6,23:1 · Woche 6,34:1 · Monat 6,27:1 · laenger 6,26:1 ·
       keine 6,27:1                                          (alle > 3:1)
     Ring gegen die Seeflaeche #d9e4ee
       5,76 · 5,86 · 5,80 · 5,79 · 5,80:1                    (alle > 3:1)
     Ring gegen die Grundflaeche (Legende, Kacheln)
       6,98 · 7,10 · 7,02 · 7,02 · 7,03:1                    (alle > 4,5:1)
     Landesgrenze #798476 gegen Land 3,28:1, gegen See 3,03:1  (> 3:1)
     --text-muted #5b6564 auf der Grundflaeche 5,65:1

   DUNKEL, Grundflaeche #221e2e, Landflaeche #242030:
     Schrift --text-primary #f4f2fb auf den Fuellungen
       heute 10,02:1 · Woche 8,05:1 · Monat 6,53:1 · laenger 5,43:1 ·
       keine 11,60:1                                        (alle > 4,5:1)
     Ring gegen die Landflaeche
       8,01 · 7,96 · 8,03 · 7,99 · 8,00:1                    (alle > 3:1)
     Ring gegen die Seeflaeche #1e2734
       7,61 · 7,55 · 7,62 · 7,58 · 7,59:1                    (alle > 3:1)
     Ring gegen die Grundflaeche
       8,21 · 8,15 · 8,22 · 8,18 · 8,19:1                    (alle > 4,5:1)
     Landesgrenze #7b73a0 gegen Land 3,63:1, gegen See 3,44:1  (> 3:1)
     --text-muted #8d879d auf der Grundflaeche 4,71:1

   WAS BEWUSST UNTER 3:1 BLEIBT: die Fuellung des Punktes gegen die
   Landflaeche (heute nur 1,06:1). Das ist kein Versehen. Eine pastellne
   Scheibe auf pastellnem Land IST kaum zu sehen - sichtbar macht den Punkt
   sein Ring, und der liegt bei 6,2:1. Die Fuellung traegt die Bedeutung, der
   Ring traegt die Sichtbarkeit. Ebenso der Seerand (1,98:1): Er ist Zierat,
   erkannt wird der See an seiner Flaeche.
   --------------------------------------------------------------------------- */

.vk-wurzel {
  --vk-land: #e9ece6;
  --vk-land-rand: #798476;
  --vk-see: #d9e4ee;
  --vk-see-rand: #8ea5ba;
  --vk-kanton: #a9b3a6;

  --vk-heute-f: #d7e9e0;   --vk-heute-t: #1a613f;
  --vk-woche-f: #c6d8b3;   --vk-woche-t: #3d5d19;
  --vk-monat-f: #d0bf8d;   --vk-monat-t: #685218;
  --vk-laenger-f: #d1a388; --vk-laenger-t: #83441f;
  --vk-keine-f: #dbdddf;   --vk-keine-t: #4c5660;
}

:root[data-theme="dark"] .vk-wurzel {
  --vk-land: #242030;
  --vk-land-rand: #7b73a0;
  --vk-see: #1e2734;
  --vk-see-rand: #5c7695;
  --vk-kanton: #4b4560;

  --vk-heute-f: #2b4036;   --vk-heute-t: #49cf90;
  --vk-woche-f: #404e32;   --vk-woche-t: #87ca39;
  --vk-monat-f: #615639;   --vk-monat-t: #d7b555;
  --vk-laenger-f: #7f5b47; --vk-laenger-t: #e4ac8c;
  --vk-keine-f: #303235;   --vk-keine-t: #b1b9c2;
}

/* Die Zuordnung Stufe -> Farbpaar steht an EINER Stelle. Alles darunter
   (Punkt, Legendenknopf, Kachel, Verteilungszeile) greift nur noch auf
   --vk-f und --vk-t zu - so kann eine Stufe nicht an einem Ort anders
   aussehen als am anderen. */
.vk-stufe-heute   { --vk-f: var(--vk-heute-f);   --vk-t: var(--vk-heute-t); }
.vk-stufe-woche   { --vk-f: var(--vk-woche-f);   --vk-t: var(--vk-woche-t); }
.vk-stufe-monat   { --vk-f: var(--vk-monat-f);   --vk-t: var(--vk-monat-t); }
.vk-stufe-laenger { --vk-f: var(--vk-laenger-f); --vk-t: var(--vk-laenger-t); }
.vk-stufe-keine   { --vk-f: var(--vk-keine-f);   --vk-t: var(--vk-keine-t); }

/* ------------------------------------------------------------- Kopf/Anordnung */

.vk-wurzel { display: flex; flex-direction: column; gap: var(--luft-block, 16px); }

.vk-stand {
  margin: 0;
  font-size: 1.02rem;
  color: var(--text-primary);
}

.vk-quelle {
  margin: 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Die Karte und die Tafel nebeneinander, auf schmalen Geraeten untereinander.
   minmax(0, ...) statt einer festen Breite: Ohne die Null als Untergrenze
   weigert sich eine Rasterspalte, unter die Breite ihres Inhalts zu
   schrumpfen, und die Seite laeuft nach rechts aus dem Bild. */
.vk-buehne {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--luft-block, 16px);
  align-items: start;
}

@media (max-width: 860px) {
  .vk-buehne { grid-template-columns: minmax(0, 1fr); }
}

.vk-feld {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: var(--luft-liste, 12px);
  box-shadow: var(--shadow);
}

.vk-karte {
  display: block;
  width: 100%;
  height: auto;
  /* Dasselbe Verhaeltnis wie der Bezugsrahmen in karte.js (1000 zu 633,3).
     Ohne diese Angabe kennt der Browser die Hoehe erst nach dem Laden und
     die Seite springt beim ersten Zeichnen. */
  aspect-ratio: 1000 / 633.3;
}

/* ------------------------------------------------------------- Die Grundkarte */

.vk-land   { fill: var(--vk-land); stroke: var(--vk-land-rand); }
.vk-see    { fill: var(--vk-see);  stroke: var(--vk-see-rand); }
.vk-kanton { fill: none; stroke: var(--vk-kanton); }

/* ------------------------------------------------------------------ Die Marken */

.vk-marke { cursor: pointer; }

.vk-scheibe {
  fill: var(--vk-f);
  stroke: var(--vk-t);
}

.vk-zahl { fill: var(--text-primary); }

/* Zurueckgenommen, nicht ausgeblendet: Wer eine Stufe waehlt, will sehen, WO
   sie liegt - dazu muss der Rest als Umgebung erhalten bleiben. 0,32 ist der
   Wert, bei dem die uebrigen Punkte noch als Muster lesbar sind, ohne mit
   den gewaehlten zu konkurrieren. Die Auskunft geht dabei nicht verloren:
   Sie steht im Satz ueber der Karte und in der Tafel. */
.vk-marke.ist-zurueck { opacity: .32; cursor: default; }

.vk-marke:hover .vk-scheibe,
.vk-marke:focus-visible .vk-scheibe { stroke-width: 2.6; }

.vk-marke:focus { outline: none; }
.vk-marke:focus-visible .vk-fokus {
  stroke: var(--accent-fg);
  stroke-width: 2.5;
}

/* --------------------------------------------------------------- Die Bewegung

   Sparsam und mit Grund: Die Marken blenden EINMAL beim Aufbau ein, gestaffelt
   nach ihrer Reihenfolge von Nord nach Sued. Das ist der einzige Anlass -
   danach bewegt sich nichts mehr von selbst. Eine Karte, auf der etwas ohne
   Anlass zappelt, zieht in einer Nachtschicht den Blick von der Arbeit weg.

   Der Versatz steht in Klassen und nicht in einem style-Attribut (siehe
   virtuellekarte.js). 30 ms je Schritt, bei 16 Schritten gedeckelt: Die ganze
   Reihe steht damit nach rund 700 ms. */
@keyframes vk-rein {
  from { opacity: 0; transform: scale(.72); }
  to   { opacity: 1; transform: scale(1); }
}

.vk-rein {
  animation: vk-rein .22s ease-out both;
  /* Ohne diesen Ursprung waechst die Marke aus der linken oberen Ecke der
     ganzen Karte heraus und fliegt quer ueber das Bild. */
  transform-box: fill-box;
  transform-origin: center;
}

.vk-v0 { animation-delay: 0ms; }    .vk-v1 { animation-delay: 30ms; }
.vk-v2 { animation-delay: 60ms; }   .vk-v3 { animation-delay: 90ms; }
.vk-v4 { animation-delay: 120ms; }  .vk-v5 { animation-delay: 150ms; }
.vk-v6 { animation-delay: 180ms; }  .vk-v7 { animation-delay: 210ms; }
.vk-v8 { animation-delay: 240ms; }  .vk-v9 { animation-delay: 270ms; }
.vk-v10 { animation-delay: 300ms; } .vk-v11 { animation-delay: 330ms; }
.vk-v12 { animation-delay: 360ms; } .vk-v13 { animation-delay: 390ms; }
.vk-v14 { animation-delay: 420ms; } .vk-v15 { animation-delay: 450ms; }
.vk-v16 { animation-delay: 480ms; }

.vk-marke, .vk-stufe, .vk-kachel { transition: opacity .18s ease, stroke-width .18s ease; }

/* Wer Bewegung abbestellt hat, bekommt gar keine - nicht eine langsamere.
   Die Marken sind dann sofort und vollstaendig da; die Karte verliert nichts
   ausser dem Einblenden. */
@media (prefers-reduced-motion: reduce) {
  .vk-rein { animation: none; }
  .vk-marke, .vk-stufe, .vk-kachel { transition: none; }
}

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

.vk-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-eng, 8px);
}

.vk-stufe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}

.vk-stufe:disabled { opacity: .55; cursor: default; }

.vk-stufe.ist-gewaehlt {
  border-color: var(--vk-t);
  /* Nicht nur der Rand: Ein einzelner farbiger Rand ist bei den helleren
     Stufen zu leise. Die zweite Linie innen macht den Zustand unabhaengig
     vom Farbton erkennbar. */
  box-shadow: inset 0 0 0 1px var(--vk-t);
}

.vk-stufe:focus-visible {
  outline: 2px solid var(--accent-fg);
  outline-offset: 2px;
}

.vk-probe { width: 22px; height: 22px; flex: none; }

.vk-stufe-zahl {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------- Die Tafel */

.vk-tafel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: var(--luft-block, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--luft-liste, 12px);
}

.vk-tafel:focus { outline: none; }
.vk-tafel:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 2px; }

.vk-tafel-titel { margin: 0; font-size: 1rem; }
.vk-tafel-satz { margin: 0; font-size: .86rem; color: var(--text-muted); }

.vk-zurueck {
  align-self: flex-start;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-primary);
  font: inherit;
  font-size: .86rem;
  padding: 5px 12px;
  cursor: pointer;
}
.vk-zurueck:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 2px; }

.vk-verteilung, .vk-objekte, .vk-ohne-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vk-verteilung-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-eng, 8px);
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--vk-f);
  color: var(--text-primary);
  /* Der Streifen links wiederholt die Stufe im Rand - so bleibt die Zeile
     auch dann zuzuordnen, wenn die Flaeche auf einem schlechten Bildschirm
     verwaschen wirkt. */
  border-left: 4px solid var(--vk-t);
  font-size: .9rem;
}

.vk-verteilung-zahl { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ------------------------------------------------------------- Die Kacheln */

.vk-kachel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--vk-f);
  border-left: 4px solid var(--vk-t);
  color: var(--text-primary);
}

.vk-kachel-name { font-weight: 600; }
.vk-kachel-grund, .vk-kachel-stufe, .vk-kachel-hinweis { font-size: .84rem; }

/* Nicht --text-muted: Auf der getoenten Kachel steht die Zweitschrift auf
   einer anderen Flaeche als im uebrigen Haus. --text-primary auf der
   dunkelsten Fuellung ("laenger her") ergibt 7,92:1 hell und 5,43:1 dunkel;
   der gedaempfte Grauton faellt dort unter 4,5:1. Zurueckgenommen wird die
   Zeile darum ueber die Schriftgroesse, nicht ueber die Farbe. */
.vk-kachel-grund, .vk-kachel-stufe { color: var(--text-primary); }
.vk-kachel-hinweis { font-weight: 600; }

/* ------------------------------------------------------- Ohne Standort */

.vk-ohne {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: var(--luft-block, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--luft-liste, 12px);
}

.vk-ohne-titel { margin: 0; font-size: 1rem; }
.vk-ohne-satz { margin: 0; font-size: .86rem; color: var(--text-muted); }

@media (min-width: 700px) {
  .vk-ohne-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* --------------------------------------------------------------- Auf Papier

   druck.css blendet button, .btn und [role="button"] pauschal aus - mit gutem
   Grund, denn auf Papier laesst sich nichts druecken. Nur steht in dieser
   Ansicht die BEDEUTUNG der Farben in der Legende, und die Legende besteht
   aus Knoepfen. Ohne die Regeln hier waere ein Ausdruck dieser Karte eine
   Flaeche mit farbigen Punkten, zu denen nirgends steht, was sie heissen -
   genau der Fehler, an dem in diesem Projekt schon vier Werte vom Papier
   verschwunden sind.

   druck.css bleibt unangetastet (fremde Spur). Die Gegenmassnahme steht hier
   und gewinnt ueber die Spezifitaet: ".vk-legende button.vk-stufe" ist
   zweistellig in den Klassen, "button" in druck.css einstellig - das
   entscheidet unabhaengig von der Reihenfolge der Stylesheets. Die Marken auf
   der Karte tragen role="button" und faellt unter dieselbe Regel; sie sind
   der Karteninhalt und muessen erst recht mit. */
@media print {
  /* Ausgeschriebene Werte statt "revert": revert holt den Wert der
     Benutzeragenten-Stufe zurueck, und was der fuer ein SVG-<g> vorsieht,
     ist zwischen den Browsern nicht dasselbe. Ein Wert, den man hinschreibt,
     ist ueberall derselbe. */
  .vk-legende button.vk-stufe { display: inline-flex !important; }
  .vk-karte g.vk-marke[role="button"] { display: inline !important; }

  .vk-legende button.vk-stufe {
    /* Auf Papier ist es keine Schaltflaeche mehr, sondern ein Eintrag der
       Zeichenerklaerung. Der gewaehlte Zustand faellt weg - gefiltert wurde
       auf dem Bildschirm, und was der Ausdruck zeigt, sagt der Satz darueber. */
    box-shadow: none !important;
    background: transparent !important;
    border-color: #767676 !important;
  }

  .vk-marke.ist-zurueck { opacity: .32; }
  .vk-rein { animation: none !important; }

  /* Karte und Tafel untereinander: In zwei Spalten wird die Karte auf A4 so
     schmal, dass die Punkte ineinanderlaufen. */
  .vk-buehne { display: block; }
  .vk-tafel { margin-top: 6mm; }

  /* Ein Kartenbild, das mitten durch einen Seitenumbruch laeuft, ist als
     Beilage wertlos. */
  .vk-feld, .vk-tafel, .vk-ohne { break-inside: avoid; }
}