/**
 * css/hub.css — Hub-Startseite (Karten-Raster) + Bereichs-Wechsler
 *
 * Gehoert zu js/hub.js. Wird von index.php geladen.
 *
 * Die Farbe einer Karte kommt aus `--f`, das js/hub.js je Karte setzt (aus
 * dem Bereichs-Verzeichnis des jeweiligen Hubs). Hier steht NIE eine
 * Bereichsfarbe — sonst haette dieselbe Sache zwei Wahrheiten.
 *
 * Abstaende, Radien und Schriftgroessen kommen aus css/system.css
 * (--nv-s*, --nv-r-*, --nv-t-*). Auch hier keine eigenen Zahlen: ein System
 * mit Ausnahmen ist kein System.
 */

.hub-start {
  padding: var(--nv-s3, var(--nv-s3)) 0 var(--nv-s5, var(--nv-s5));
}

/* ── Zahlenreihe ────────────────────────────────────────────────────────
   Waagrecht scrollbar, damit drei oder sechs Werte gleich gut aussehen und
   nichts umbricht. */
.hub-zahlen {
  display: flex;
  gap: var(--nv-s2, var(--nv-s2));
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--nv-s4, var(--nv-s4)) var(--nv-s4, var(--nv-s4));
  margin: 0 calc(var(--nv-s4, var(--nv-s4)) * -1);
}
.hub-zahlen::-webkit-scrollbar { display: none; }

.hub-zahl {
  flex: 1 0 auto;
  min-width: 116px;
  padding: var(--nv-s3, var(--nv-s3)) var(--nv-s4, var(--nv-s4));
  border-radius: var(--nv-r-karte, 18px);
  background: var(--k-bg2, rgba(255, 255, 255, .6));
  border: 1px solid var(--k-line, rgba(0, 0, 0, .06));
}
.hub-zahl-wert {
  font-size: var(--nv-t-kopf, 1.15rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--f, var(--k-text));
  font-variant-numeric: tabular-nums;
}
.hub-zahl-label {
  font-size: var(--k-fs-caption);
  color: var(--k-text3);
  margin-top: 2px;
}

.hub-gruppe-titel {
  font-size: var(--k-fs-caption);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--k-text3);
  padding: 0 var(--nv-s4, var(--nv-s4)) var(--nv-s2, var(--nv-s2));
}

/* ── Karten-Raster ─────────────────────────────────────────────────────
   Eine Spalte auf schmalen Geraeten, mehr wenn Platz da ist. `auto-fill` mit
   Mindestbreite statt fester Spaltenzahl: dann stimmt es auch auf dem iPad
   quer und am Bildschirm, ohne dass hier eine Geraeteliste steht. */
.hub-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--nv-s2, var(--nv-s2));
  padding: 0 var(--nv-s4, var(--nv-s4));
}

.hub-karte {
  display: flex;
  align-items: center;
  gap: var(--nv-s3, var(--nv-s3));
  width: 100%;
  min-height: var(--nv-tap, 44px);
  padding: var(--nv-s3, var(--nv-s3)) var(--nv-s3, var(--nv-s3));
  border: 1px solid var(--k-line, rgba(0, 0, 0, .06));
  border-radius: var(--nv-r-karte, 18px);
  background: var(--k-bg2, rgba(255, 255, 255, .6));
  color: var(--k-text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.22, 1, .36, 1), background .16s;
}
.hub-karte:active { transform: scale(.975); }
@media (hover: hover) {
  .hub-karte:hover { background: var(--k-bg3, rgba(0, 0, 0, .03)); }
}

/* Das farbige Feld ist der einzige Ort, an dem die Bereichsfarbe auftritt.
   `color-mix` macht aus einer Farbe eine gedaempfte Flaeche und ein
   kraeftiges Zeichen — so bleibt bei zwoelf Karten nebeneinander alles
   lesbar, statt dass zwoelf Vollflaechen um Aufmerksamkeit streiten. */
.hub-karte-symbol {
  flex: 0 0 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: calc(var(--nv-r-karte) - var(--nv-s3)); /* Nacht 4 (Stefan 17): Formel Karte 26 − Polster 12 = 14, war 12 */
  background: color-mix(in srgb, var(--f) 14%, transparent);
  color: var(--f);
}
.hub-karte-symbol .material-symbols-rounded { font-size: var(--k-fs-titel); }

.hub-karte-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.hub-karte-label {
  font-size: var(--k-fs-body);
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-karte-sub {
  font-size: var(--k-fs-caption);
  color: var(--k-text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-karte-badge {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--nv-s2);
  border-radius: var(--nv-r-kapsel);
  background: var(--f);
  color: var(--k-text-auf-marke);
  font-size: var(--k-fs-caption);
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ── Bereichs-Wechsler (Blatt von unten) ───────────────────────────────── */
.hub-wechsler { display: flex; flex-direction: column; gap: 2px; }

.hub-wechsler-zeile {
  display: flex;
  align-items: center;
  gap: var(--nv-s3, var(--nv-s3));
  width: 100%;
  min-height: var(--nv-tap, 44px);
  padding: var(--nv-s2, var(--nv-s2)) var(--nv-s3, var(--nv-s3));
  border: none;
  border-radius: var(--nv-r-s, 12px);
  background: transparent;
  color: var(--k-text);
  font-family: inherit;
  font-size: var(--k-fs-body);
  text-align: left;
  cursor: pointer;
}
.hub-wechsler-zeile:active { background: var(--k-bg3, rgba(0, 0, 0, .04)); }
.hub-wechsler-zeile.ist-aktiv { background: color-mix(in srgb, var(--f) 10%, transparent); }
.hub-wechsler-symbol {
  flex: 0 0 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--nv-r-eingabe);
  background: color-mix(in srgb, var(--f) 14%, transparent);
  color: var(--f);
}
.hub-wechsler-symbol .material-symbols-rounded { font-size: 19px; }
.hub-wechsler-label { flex: 1 1 auto; }
.hub-wechsler-haken { color: var(--f); font-size: 20px; }