/* ══════════════════════════════════════════════════════════════════
   DIE BOXEN — was wo wie gezeigt wird.

   Owner 24.09.2026: *"jetzt das kopieren von denen, was er boxen
   angeht: was wo wie gezeigt wird"* — und der Rahmen darum: *"menü
   aussehen, grafiken, layout, funktionen, agenten, aufgaben,
   orchestrierung, voice, hand, gehirn: alles im einklang"*.

   ZEHN BAUSTEINE, an structura-os.com abgelesen. Sie bauen jede ihrer
   fünf Ansichten aus denselben Teilen — deshalb wirkt das System aus
   einem Guss. Genau das ist mit "im Einklang" gemeint, und genau
   deshalb steht das hier EINMAL und nicht auf jeder Seite neu (R9).

       zx-box          Rahmen mit Kopfzeile und eigenem Filter
       zx-kpi          Kennzahl: Symbol · Zahl · Trend · Verlauf
       zx-donut        Ring mit Summe in der Mitte
       zx-balkenliste  Name | Balken | Zahl
       zx-heat         Heatmap Wochentag × Stunde
       zx-tab          Tabelle mit Rang
       zx-akte         Detail-Panel mit Feldliste und Knopf
       zx-karte        Kanban-Karte
       zx-etikett      farbiges Statuswort
       zx-modul        nummerierter Funktionskasten

   FARBEN AUS DEM HAUS. Ihre Fläche ist blau-violett auf Marine,
   unsere Amber auf Dunkelbraun. Die Formen sind dieselben, die
   Palette bleibt die des Hauses — keine Seite erfindet eigene Töne.

   WAS IHRE BAUSTEINE NICHT KÖNNEN und unsere können müssen: eine Zahl
   zeigen, die es nicht gibt. Bei ihnen steht überall etwas, es ist
   ein Verkaufsbild. Hier hat jeder Baustein einen Zustand für
   "nicht messbar" — sichtbar anders als eine Null (R4).
   ══════════════════════════════════════════════════════════════════ */

/* ── Der Rahmen ─────────────────────────────────────────────────── */
.zx-box{border:1px solid var(--zx-line);border-radius:14px;
  background:rgba(0,0,0,.24);padding:13px 14px 12px;min-width:0}
.zx-box-kopf{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:11px}
.zx-box-kopf h3{margin:0;font-size:14px;font-weight:600;letter-spacing:-.2px}
/* Jede Box trägt oben rechts ihren eigenen Filter — bei ihnen
   durchgehend so, und es macht den Bezug jeder Zahl klar. */
.zx-box-filter{font-family:var(--zx-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--zx-mute);text-decoration:none;
  background:none;border:0;cursor:pointer;padding:0}
a.zx-box-filter:hover,button.zx-box-filter:hover{color:var(--zx-amber)}
/* Das Info-Zeichen am Titel: bei ihnen ein ⓘ, das erklärt, woher die
   Zahl kommt. Bei uns dasselbe — nur steht da eine echte Quelle. */
.zx-box-info{display:inline-grid;place-items:center;width:14px;height:14px;
  margin-left:5px;border-radius:50%;font-size:9px;cursor:help;
  border:1px solid var(--zx-line);color:var(--zx-mute);vertical-align:1px}

/* ── Kennzahl ───────────────────────────────────────────────────── */
.zx-kpi-reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1000px){.zx-kpi-reihe{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.zx-kpi-reihe{grid-template-columns:1fr}}
.zx-kpi{border:1px solid var(--zx-line);border-radius:14px;
  background:rgba(0,0,0,.24);padding:13px 14px 11px}
.zx-kpi .k{display:flex;align-items:center;gap:9px}
.zx-kpi .sym{width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  display:grid;place-items:center;font-size:14px;
  background:rgba(245,166,35,.13);color:var(--zx-amber)}
.zx-kpi .titel{font-size:11.5px;color:var(--zx-mute);letter-spacing:.04em}
.zx-kpi .wert{display:block;margin-top:9px;font-family:var(--zx-mono);
  font-size:27px;font-weight:700;letter-spacing:-1px;line-height:1;
  font-variant-numeric:tabular-nums}
/* Nicht messbar sieht anders aus als null — ihre Karten kennen
   diesen Fall gar nicht. */
.zx-kpi .wert.leer{color:var(--zx-mute);font-size:19px;letter-spacing:0}
.zx-kpi .trend{display:inline-block;margin-left:7px;font-size:11px;
  font-weight:700;vertical-align:2px}
.zx-kpi .trend.auf{color:#35c88e}
.zx-kpi .trend.ab{color:#f4795b}
.zx-kpi .trend.neutral{color:var(--zx-mute)}
.zx-kpi .bezug{display:block;margin-top:4px;font-size:10px;
  color:var(--zx-mute);line-height:1.4}
.zx-kpi .linie{display:flex;align-items:flex-end;gap:2px;height:26px;
  margin-top:9px}
.zx-kpi .linie i{flex:1;min-width:2px;border-radius:1px 1px 0 0;
  background:var(--zx-amber);opacity:.5}
.zx-kpi .linie i:last-child{opacity:1}

/* ── Ring mit Summe in der Mitte ────────────────────────────────── */
.zx-donut-raum{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.zx-donut{width:126px;height:126px;border-radius:50%;flex:0 0 auto;
  position:relative;display:grid;place-items:center}
/* Der Ring entsteht aus einem Kegelverlauf — kein Zeichenwerk, kein
   SVG-Pfad, und er bleibt beim Zoomen scharf. Die Farbstopps setzt
   zeus-boxen.js aus den echten Werten. */
.zx-donut::after{content:"";position:absolute;inset:26px;border-radius:50%;
  background:var(--zx-surface-tief,#0c0905)}
.zx-donut .mitte{position:relative;z-index:1;text-align:center;line-height:1.2}
.zx-donut .mitte b{display:block;font-family:var(--zx-mono);font-size:17px;
  font-weight:700;font-variant-numeric:tabular-nums}
.zx-donut .mitte span{font-size:9px;color:var(--zx-mute);
  letter-spacing:.1em;text-transform:uppercase}
.zx-donut-legende{flex:1;min-width:150px;display:flex;flex-direction:column;
  gap:6px}
.zx-donut-legende .z{display:grid;grid-template-columns:9px 1fr auto auto;
  gap:9px;align-items:center;font-size:12px}
.zx-donut-legende .p{width:9px;height:9px;border-radius:50%}
.zx-donut-legende .n{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.zx-donut-legende b{font-family:var(--zx-mono);font-variant-numeric:tabular-nums}
.zx-donut-legende .pz{font-family:var(--zx-mono);font-size:10.5px;
  color:var(--zx-mute);min-width:38px;text-align:right}

/* ── Balkenliste: Name | Balken | Zahl ──────────────────────────── */
.zx-balkenliste{display:flex;flex-direction:column;gap:7px}
.zx-balkenliste .z{display:grid;grid-template-columns:minmax(72px,132px) 1fr auto;
  gap:10px;align-items:center;font-size:12px}
.zx-balkenliste .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--zx-dim)}
.zx-balkenliste .bar{height:9px;border-radius:99px;background:rgba(255,255,255,.06);
  overflow:hidden}
.zx-balkenliste .bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--zx-amber),var(--zx-gold-weich,#ffd176))}
.zx-balkenliste b{font-family:var(--zx-mono);font-size:11.5px;
  font-variant-numeric:tabular-nums;min-width:38px;text-align:right}

/* ── Heatmap: Wochentag × Stunde ────────────────────────────────── */
.zx-heat{display:grid;grid-template-columns:26px 1fr;gap:6px;align-items:center}
.zx-heat .tage{display:grid;gap:3px;font-family:var(--zx-mono);font-size:9px;
  color:var(--zx-mute);text-align:right}
.zx-heat .feld{display:grid;gap:3px}
.zx-heat .reihe{display:grid;gap:3px}
.zx-heat .z{height:13px;border-radius:2px;background:rgba(245,166,35,.06)}
.zx-heat-fuss{display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;font-family:var(--zx-mono);font-size:9px;color:var(--zx-mute)}
.zx-heat-skala{flex:1;height:5px;margin:0 10px;border-radius:99px;
  background:linear-gradient(90deg,rgba(245,166,35,.08),var(--zx-amber))}

/* ── Tabelle mit Rang ───────────────────────────────────────────── */
.zx-tab{width:100%;border-collapse:collapse;font-size:12.5px}
.zx-tab th{text-align:left;font-family:var(--zx-mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--zx-mute);
  font-weight:400;padding:0 0 7px}
.zx-tab th:not(:first-child),.zx-tab td:not(:first-child){text-align:right}
.zx-tab td{padding:7px 0;border-top:1px solid rgba(255,255,255,.05)}
.zx-tab td b{font-family:var(--zx-mono);font-weight:600;
  font-variant-numeric:tabular-nums}
.zx-tab .rang{color:var(--zx-mute);font-family:var(--zx-mono);
  width:22px;text-align:left}
.zx-tab tr:hover td{background:rgba(245,166,35,.04)}

/* ── Detail-Panel ───────────────────────────────────────────────── */
.zx-akte{border:1px solid var(--zx-line);border-radius:14px;
  background:rgba(0,0,0,.24);padding:16px;align-self:start}
.zx-akte h2{margin:0 0 3px;font-size:17px;font-weight:600;letter-spacing:-.3px}
.zx-akte .unter{font-family:var(--zx-mono);font-size:10px;color:var(--zx-mute)}
.zx-akte-feld{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-top:1px solid rgba(255,255,255,.055);font-size:12.5px}
.zx-akte-feld:first-of-type{border-top:0}
.zx-akte-feld span{color:var(--zx-mute)}
.zx-akte-feld b{font-weight:600;text-align:right;overflow-wrap:anywhere}
.zx-akte-knopf{display:block;width:100%;margin-top:14px;padding:9px;
  border-radius:9px;cursor:pointer;text-align:center;text-decoration:none;
  border:1px solid rgba(245,166,35,.45);background:rgba(245,166,35,.12);
  color:var(--zx-amber);font-family:var(--zx-mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase}

/* ── Kanban-Karte ───────────────────────────────────────────────── */
.zx-spalten{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.zx-spalte{flex:0 0 232px;min-width:0}
.zx-spalte-kopf{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:9px}
.zx-karte{border:1px solid var(--zx-line);border-radius:11px;
  background:rgba(0,0,0,.3);padding:10px 11px;margin-bottom:8px;cursor:pointer}
.zx-karte:hover{border-color:rgba(245,166,35,.4)}
.zx-karte .na{font-size:12.5px;font-weight:600}
.zx-karte .fi{font-size:10.5px;color:var(--zx-mute);margin-top:1px}
.zx-karte .we{font-family:var(--zx-mono);font-size:12px;margin-top:7px;
  font-variant-numeric:tabular-nums}

/* ── Etikett ────────────────────────────────────────────────────── */
.zx-etikett{display:inline-block;padding:3px 9px;border-radius:99px;
  font-family:var(--zx-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap}
.zx-etikett.gut{background:rgba(53,200,142,.16);color:#35c88e}
.zx-etikett.warn{background:rgba(245,166,35,.16);color:var(--zx-amber)}
.zx-etikett.schlecht{background:rgba(244,121,91,.16);color:#f4795b}
.zx-etikett.still{background:rgba(255,255,255,.07);color:var(--zx-mute)}

/* ── Nummerierter Funktionskasten ───────────────────────────────── */
.zx-modul{border:1px solid var(--zx-line);border-radius:14px;
  background:rgba(0,0,0,.24);padding:16px}
.zx-modul .nr{font-family:var(--zx-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--zx-amber)}
.zx-modul h3{margin:5px 0 7px;font-size:16px;font-weight:600;
  letter-spacing:-.3px}
.zx-modul p{margin:0 0 10px;font-size:12.5px;line-height:1.55;
  color:var(--zx-dim)}
.zx-modul ul{margin:0;padding-left:16px;font-size:12px;line-height:1.75;
  color:var(--zx-dim)}
.zx-modul .nutzen{margin-top:11px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.055);font-size:12px;
  color:var(--zx-mute);line-height:1.5}

/* ── Was überall gilt: leer ist nicht kaputt ────────────────────── */
.zx-leer{padding:26px 16px;text-align:center;color:var(--zx-mute);
  font-size:12.5px;line-height:1.7}
.zx-warn{color:#f4795b}