/* ============================================================
   diBP – Herkunft der Menschen
   Zwei Bausteine: der Globus (#herkunft-globus) und die
   Rangliste (#herkunft-liste). Die Farben stehen als Variablen,
   damit herkunft.js sie auslesen und auf das Canvas übertragen
   kann – deshalb hier nur Vollfarben, keine Verläufe.
   ============================================================ */

/* ---------- Globus ---------- */
.hk-buehne{
  --hk-rot:      #A72920;   /* Bögen, Herkunftspunkte    */
  --hk-ziel:     #16191D;   /* Deutschland, Ankunftsringe*/
  --hk-land:     #69737D;   /* Landpunkte der Weltkarte  */
  --hk-kugel-1:  #FFFFFF;   /* Lichtseite                */
  --hk-kugel-2:  #E9ECEF;   /* Schattenseite             */
  --hk-rand:     #C9D0D6;   /* Kante der Kugel           */
  --hk-schrift:  #FFFFFF;   /* Schrift in den Schildern  */
  --hk-gitter:   #D8DDE1;   /* Gradnetz, nur als Ersatz  */

  position:relative;display:block;width:100%;
}
.hk-leinwand{
  /* Das Seitenverhältnis kommt aus dem Stylesheet, nicht aus dem Skript:
     so bleibt die Kugel rund, auch wenn sich die Spaltenbreite ändert,
     bevor das Skript neu gemessen hat. */
  display:block;width:100%;aspect-ratio:1;height:auto;
  cursor:grab;touch-action:pan-y;
}
.hk-leinwand.zieht{cursor:grabbing}
.hk-leinwand.ueber-ort{cursor:pointer}

/* Auf dunklem Grund dreht sich das Verhältnis um: helle Landpunkte
   auf dunkler Kugel, das hellere Rot, weiße Ziel-Ringe. */
.hk-dunkel .hk-buehne,
.hk-buehne.hk-dunkel{
  --hk-rot:      #DE5245;
  --hk-ziel:     #FFFFFF;
  --hk-land:     #8494A3;
  --hk-kugel-1:  #33414F;
  --hk-kugel-2:  #1B242D;
  --hk-rand:     #55636F;
  --hk-schrift:  #FFFFFF;
  --hk-gitter:   #3C4A57;
}

/* ---------- Rangliste ---------- */
/* Ein Raster fuer die ganze Liste, nicht je Zeile eines: sonst richtet
   sich jede Zeile nach ihrem eigenen Namen und die Balken fangen bei
   "Deutschland" und "Afghanistan" weiter rechts an als bei "Iran". */
.hk-liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:16px;row-gap:11px;align-items:center;
}
.hk-zeile{display:contents}
.hk-name{font-size:13px;font-weight:700;color:var(--ink)}
.hk-wert{font-size:12.5px;font-weight:700;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;min-width:2.2em}
/* overflow bleibt sichtbar, damit der Puls ueber die Linie hinausragt */
.hk-balken{display:block;position:relative;height:9px;background:#EDEFF1;border-radius:5px}
.hk-balken i{display:block;position:relative;height:100%;width:var(--w);border-radius:5px;background:#A72920}

/* Deutschland ist kein Herkunftsland im engeren Sinn, "Andere" kein Land –
   beide bleiben deshalb neutral. */
.hk-zeile.ohne-ort .hk-balken i{background:#9AA3AB}
.hk-zeile.ohne-ort .hk-name{color:var(--slate)}

@media (max-width:520px){
  .hk-zeile{grid-template-columns:minmax(70px,auto) minmax(0,1fr) 28px;gap:9px}
  .hk-name{font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  .hk-balken i{transition:none}
}