/* css/menue.css — das Menü (Blatt von unten) und die Hub-Ordnung
 *
 * Stefan 2026-08-02: „bitte menu so machen wie spaces mit farbenigen icons und
 * dicken und grössen von titeln usw" · „alle icons haben gleiche farbe was
 * extrem mühsam ist zum schauen" · „die hub aufteilung besser und intuitiver".
 *
 * WARUM FARBE HIER ARBEIT LEISTET
 * Eine Liste, in der alle Symbole gleich aussehen, zwingt zum Lesen — Wort für
 * Wort, jedes Mal. Trägt jeder Bereich seine Farbe, findet man die Zeile schon,
 * bevor man sie gelesen hat. Die Farben kommen aus `NAV_HUBS`/`item.color`
 * (js/nav-registry.js) und werden als CSS-Variable `--f` an die Zeile gereicht;
 * hier steht KEINE einzige Modulfarbe. Sonst gäbe es zwei Wahrheiten.
 *
 * DIE SCHRIFT-STUFEN (das „dicken und grössen von titeln")
 *   Hub-Titel     1.02rem / 700   — die Landkarte
 *   Hub-Untertext  .76rem / 500   — wofür der Bereich zuständig ist
 *   Modul-Titel    .96rem / 600   — was man anklickt
 *   Modul-Untertext .76rem / 400  — was es tut
 *   Abschnitt      .70rem / 700 · Grossbuchstaben, weit gesperrt
 * Vier Stufen, mehr nicht. Jede weitere Stufe macht die Ordnung unschärfer,
 * nicht feiner.
 *
 * VERLINKUNGEN: js/nav-registry.js (NAV_HUBS, navFarbe), js/form.js
 * (openMobileMenuSheet baut das Blatt), docs/DEVLOG.md 2026-08-02.
 */

/* ── Suche ───────────────────────────────────────────────────────────── */
.mn-suche { padding: 2px 0 var(--nv-s4); }
.mn-suche input {
  width: 100%; box-sizing: border-box;
  padding: var(--nv-s4) var(--nv-s4); min-height: 48px;
  border: none; border-radius: var(--k-r-full, 9999px);
  background: var(--k-fill, rgba(120,120,128,.10));
  color: var(--k-text); font-family: inherit; font-size: var(--k-fs-hervor);
  outline: none;
}

/* ── Abschnitts-Überschrift ──────────────────────────────────────────── */
/* Demo (.sheet h3): Serifen-Zwischentitel statt VERSALIEN-Etikett. */
.mn-abschnitt {
  font-family: var(--nv-font-display, Georgia, serif);
  font-size: var(--k-fs-body); font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--k-text);
  padding: var(--nv-s4) var(--nv-s2) var(--nv-s2);
}

/* ── Schnellaktionen: Kacheln mit farbigem Symbol ────────────────────── */
.mn-raster {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nv-s3); padding: 2px 0 var(--nv-s2);
}
.mn-kachel {
  display: flex; flex-direction: column; align-items: center; gap: var(--nv-s2);
  padding: var(--nv-s4) var(--nv-s1) var(--nv-s3); min-height: 84px;
  border-radius: var(--nv-r-karte, 18px);
  background: var(--k-surface-solid, var(--nv-flaeche-erhoben));
  border: 1px solid var(--k-border);
  box-shadow: var(--nv-sh, var(--k-shadow-sm));
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s;
}
.mn-kachel:active { transform: scale(.95); }
.mn-kachel span:last-child {
  font-size: var(--k-fs-caption); font-weight: 600; color: var(--k-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* Das farbige Feld hinter dem Symbol. `--f` kommt aus der Registry.
   `color-mix` faerbt den Hintergrund aus derselben Farbe ein — so passt der
   Ton immer, auch bei einer Farbe, die es heute noch gar nicht gibt. Fällt
   `color-mix` aus (aeltere Browser), bleibt das neutrale Feld: blass, aber
   nie falsch. */
.mn-symbol {
  /* Organische Form (Spez §3): nie perfekte Kreise oder Quadrate. */
  width: 42px; height: 42px; border-radius: var(--nv-chip-form, 13px);
  display: flex; align-items: center; justify-content: center;
  background: var(--k-fill, rgba(120,120,128,.10));
  background: color-mix(in srgb, var(--f, var(--k-brand)) 15%, transparent);
  color: var(--f, var(--k-brand));
  flex: 0 0 auto;
}
.mn-symbol .material-symbols-rounded { font-size: var(--k-fs-titel); }

/* ── Hubs ────────────────────────────────────────────────────────────── */
.mn-hub {
  background: var(--k-surface-solid, var(--nv-flaeche-erhoben));
  border-radius: var(--nv-r-blatt, 20px);
  border: 1px solid var(--k-border);
  box-shadow: var(--nv-sh, var(--k-shadow-sm));
  margin-bottom: var(--nv-s3);
  overflow: hidden;
}

/* Der Kopf ist ein Knopf: er klappt den Bereich auf und zu. Ein Bereich, den
   man nicht schliessen kann, zwingt beim Suchen zum Scrollen an allem vorbei,
   was man gerade nicht braucht. */
.mn-hub-kopf {
  display: flex; align-items: center; gap: var(--nv-s3);
  width: 100%; box-sizing: border-box;
  padding: var(--nv-s4) var(--nv-s4); min-height: 68px;
  border: none; background: transparent;
  font-family: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mn-hub-kopf:active { background: var(--k-fill, rgba(120,120,128,.06)); }
.mn-hub-kopf .mn-symbol { width: 44px; height: 44px; border-radius: var(--nv-chip-form, 14px); }
.mn-hub-kopf .mn-symbol .material-symbols-rounded { font-size: 25px; }
.mn-hub-text { flex: 1; min-width: 0; }
.mn-hub-text b {
  display: block; font-size: var(--k-fs-hervor); font-weight: 700;
  color: var(--k-text); letter-spacing: -.01em; line-height: 1.2;
}
.mn-hub-text small {
  display: block; font-size: var(--k-fs-caption); font-weight: 500;
  color: var(--k-text3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mn-hub-zahl {
  font-size: var(--k-fs-caption); font-weight: 700; color: var(--k-text3);
  background: var(--k-fill, rgba(120,120,128,.10));
  padding: var(--nv-s1) var(--nv-s2); border-radius: var(--nv-r-kapsel); flex: 0 0 auto;
}
.mn-hub-pfeil {
  color: var(--k-text4, var(--k-text3)); flex: 0 0 auto;
  transition: transform .22s cubic-bezier(.32,.72,0,1);
}
.mn-hub.ist-offen .mn-hub-pfeil { transform: rotate(180deg); }

.mn-hub-inhalt { display: none; padding: 0 var(--nv-s2) var(--nv-s2); }
.mn-hub.ist-offen .mn-hub-inhalt { display: block; }

/* ── Modulzeile ──────────────────────────────────────────────────────── */
.mn-zeile {
  display: flex; align-items: center; gap: var(--nv-s3);
  padding: var(--nv-s2) var(--nv-s2); min-height: 56px;
  border-radius: var(--nv-r-s, 14px);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mn-zeile:active { background: var(--k-fill, rgba(120,120,128,.08)); }
.mn-zeile .mn-symbol { width: 36px; height: 36px; border-radius: var(--nv-chip-form, 11px); }
.mn-zeile .mn-symbol .material-symbols-rounded { font-size: 20px; }
.mn-zeile-text { flex: 1; min-width: 0; }
.mn-zeile-text b {
  display: block; font-size: .96rem; font-weight: 600; color: var(--k-text);
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mn-zeile-text small {
  display: block; font-size: var(--k-fs-caption); font-weight: 400; color: var(--k-text3);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mn-zeile-pfeil { color: var(--k-text4, var(--k-text3)); flex: 0 0 auto; font-size: 20px; }

.mn-leer {
  padding: var(--nv-s5) var(--nv-s2); text-align: center;
  font-size: var(--k-fs-body); color: var(--k-text3);
}

/* ── Bildschirm ──────────────────────────────────────────────────────── */
/* Ab Tablet zwei Spalten: die Hubs sind Kacheln, keine Liste. Untereinander
   entstünde sonst eine 2000 px lange Schlange auf einer Fläche, die drei
   davon nebeneinander tragen könnte. */
@media (min-width: 768px) {
  .mn-hubs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nv-s3); align-items: start; }
  .mn-hub { margin-bottom: 0; }
  .mn-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Untergruppen innerhalb eines Bereichs (Stefan 2026-08-24: «zudem müsste es
   evtl besser strukturiert sein im menu»). Kein Kasten, nur eine Zäsur —
   die Zeilen darunter gehören sichtbar zusammen. */
.mn-untergruppe {
  display: block;
  padding: var(--nv-s4) var(--nv-s4) var(--nv-s1);
  line-height: 1.35;
}
.mn-untergruppe b {
  display: block;
  font-size: var(--k-fs-body);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--k-text2, var(--k-text3));
}
.mn-untergruppe small {
  display: block;
  font-size: var(--k-fs-caption);
  color: var(--k-text3);
  margin-top: 1px;
}
.mn-untergruppe + .mn-zeile { border-top: 0; }