/*!
 * mzone-ui 1.0.0 — Design-Vokabular fuer maierzone-Artefakte
 *
 * Kodifiziert, was Reports und Visualisierungen bisher per Inline-Style
 * nachgebaut haben. Klassen statt Komponenten: faellt JS aus, bleibt der
 * Inhalt lesbar — Reports bestehen aus Text.
 *
 * Alle Klassen tragen den Praefix .mz-, damit sie sich nicht mit
 * artefakteigenem CSS beissen. Katalog: mzone-ui.catalog.json
 */

/* ------------------------------------------------------------------ *
 * Farben. Dunkel ist die Grundhaltung — hell ist die Anpassung.
 * ------------------------------------------------------------------ */

:root {
  --mz-bg:          #0b0f14;
  --mz-surface:     #10161d;
  --mz-surface-alt: #0e1319;
  --mz-border:      #232b35;
  --mz-border-soft: #1a2129;

  --mz-text:        #c8d2de;
  --mz-text-strong: #e9edf2;
  --mz-text-muted:  #7f8a99;

  --mz-accent:      #ff3b2f;
  --mz-ok:          #5ee39b;
  --mz-warn:        #ffd166;
  --mz-danger:      #ff7a5c;
  --mz-info:        #7cc4ff;
  --mz-special:     #c08cff;

  /* Gedaempfte Flaechen fuer Status-Karten */
  --mz-ok-bg:       #0e1a13;
  --mz-ok-border:   #2a6b3f;
  --mz-danger-bg:   #150d0c;
  --mz-danger-border: #4a2320;

  --mz-font:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mz-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --mz-radius:   10px;
  --mz-radius-sm: 6px;
  --mz-gap:      14px;
  --mz-measure:  72ch;
}

@media (prefers-color-scheme: light) {
  :root {
    --mz-bg:          #f7f8fa;
    --mz-surface:     #ffffff;
    --mz-surface-alt: #f0f2f5;
    --mz-border:      #d5dae1;
    --mz-border-soft: #e4e8ed;

    --mz-text:        #2b333d;
    --mz-text-strong: #10161d;
    --mz-text-muted:  #626e7c;

    --mz-accent:      #d32b1f;
    --mz-ok:          #1c7a48;
    --mz-warn:        #9a6b00;
    --mz-danger:      #b8391c;
    --mz-info:        #1d6fb8;
    --mz-special:     #7331c4;

    --mz-ok-bg:       #eef8f2;
    --mz-ok-border:   #a8d8bd;
    --mz-danger-bg:   #fdf0ee;
    --mz-danger-border: #e8b6ab;
  }
}

/* Explizite Wahl schlaegt die Systemeinstellung — in BEIDE Richtungen. */
:root[data-theme="light"] {
  --mz-bg: #f7f8fa;          --mz-surface: #ffffff;     --mz-surface-alt: #f0f2f5;
  --mz-border: #d5dae1;      --mz-border-soft: #e4e8ed;
  --mz-text: #2b333d;        --mz-text-strong: #10161d; --mz-text-muted: #626e7c;
  --mz-accent: #d32b1f;      --mz-ok: #1c7a48;          --mz-warn: #9a6b00;
  --mz-danger: #b8391c;      --mz-info: #1d6fb8;        --mz-special: #7331c4;
  --mz-ok-bg: #eef8f2;       --mz-ok-border: #a8d8bd;
  --mz-danger-bg: #fdf0ee;   --mz-danger-border: #e8b6ab;
}

:root[data-theme="dark"] {
  --mz-bg: #0b0f14;          --mz-surface: #10161d;     --mz-surface-alt: #0e1319;
  --mz-border: #232b35;      --mz-border-soft: #1a2129;
  --mz-text: #c8d2de;        --mz-text-strong: #e9edf2; --mz-text-muted: #7f8a99;
  --mz-accent: #ff3b2f;      --mz-ok: #5ee39b;          --mz-warn: #ffd166;
  --mz-danger: #ff7a5c;      --mz-info: #7cc4ff;        --mz-special: #c08cff;
  --mz-ok-bg: #0e1a13;       --mz-ok-border: #2a6b3f;
  --mz-danger-bg: #150d0c;   --mz-danger-border: #4a2320;
}

/* ------------------------------------------------------------------ *
 * Seitengeruest
 * ------------------------------------------------------------------ */

.mz-body {
  margin: 0;
  background: var(--mz-bg);
  color: var(--mz-text);
  font: 15px/1.65 var(--mz-font);
  -webkit-text-size-adjust: 100%;
}

/* Der Canvas-Hintergrund liegt hinter allem und faengt keine Klicks ab. */
.mz-fx-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.mz-page {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 24px 96px;
}

.mz-page--wide { max-width: 1280px; }

/* Fließtext auf lesbare Zeilenlaenge begrenzen, Tabellen und Karten nicht. */
.mz-prose > p,
.mz-prose > ul,
.mz-prose > ol { max-width: var(--mz-measure); }

/* ------------------------------------------------------------------ *
 * Typografie
 * ------------------------------------------------------------------ */

.mz-eyebrow {
  font: 700 11px/1 var(--mz-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mz-accent);
  margin: 0 0 10px;
}

.mz-eyebrow--muted { color: var(--mz-text-muted); }
.mz-eyebrow--ok    { color: var(--mz-ok); }
.mz-eyebrow--info  { color: var(--mz-info); }
.mz-eyebrow--special { color: var(--mz-special); }

.mz-title {
  margin: 0 0 8px;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--mz-text-strong);
}

.mz-subtitle {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mz-text-muted);
  max-width: var(--mz-measure);
}

.mz-h2 {
  margin: 42px 0 14px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--mz-text-strong);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mz-border-soft);
}

.mz-h3 {
  margin: 26px 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--mz-text-strong);
}

.mz-lead { font-size: 17px; line-height: 1.6; color: var(--mz-text-strong); }
.mz-muted { color: var(--mz-text-muted); }
.mz-small { font-size: 12.5px; line-height: 1.55; }

.mz-code {
  font: 0.9em/1.4 var(--mz-mono);
  background: var(--mz-surface-alt);
  border: 1px solid var(--mz-border-soft);
  border-radius: 4px;
  padding: .12em .4em;
}

.mz-pre {
  margin: 0;
  padding: 14px 16px;
  background: var(--mz-surface-alt);
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius-sm);
  font: 12px/1.6 var(--mz-mono);
  color: var(--mz-text);
  overflow-x: auto;
  white-space: pre;
}

/* ------------------------------------------------------------------ *
 * Karten
 * ------------------------------------------------------------------ */

.mz-card {
  border: 1px solid var(--mz-border);
  background: var(--mz-surface);
  border-radius: var(--mz-radius);
  padding: 16px 18px;
  margin: var(--mz-gap) 0;
}

.mz-card__label {
  font: 700 11px/1 var(--mz-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mz-accent);
  margin-bottom: 10px;
}

.mz-card__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--mz-text-muted);
}

.mz-card--ok {
  border-color: var(--mz-ok-border);
  background: var(--mz-ok-bg);
}
.mz-card--ok .mz-card__label { color: var(--mz-ok); }

.mz-card--danger {
  border-color: var(--mz-danger-border);
  background: var(--mz-danger-bg);
}
.mz-card--danger .mz-card__label { color: var(--mz-danger); }

.mz-card--accent { border-left: 3px solid var(--mz-accent); }

/* ------------------------------------------------------------------ *
 * Raster
 * ------------------------------------------------------------------ */

.mz-grid {
  display: grid;
  gap: var(--mz-gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: var(--mz-gap) 0;
}

.mz-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.mz-grid--4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ------------------------------------------------------------------ *
 * Tabellen — scrollen in sich selbst, damit die Seite nie quer laeuft
 * ------------------------------------------------------------------ */

.mz-table-wrap {
  overflow-x: auto;
  margin: var(--mz-gap) 0;
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
}

.mz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.55;
}

.mz-table th {
  text-align: left;
  font: 700 11px/1.4 var(--mz-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mz-text-muted);
  background: var(--mz-surface-alt);
  padding: 10px 14px;
  border-bottom: 1px solid var(--mz-border);
  white-space: nowrap;
}

.mz-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--mz-border-soft);
  vertical-align: top;
  color: var(--mz-text);
}

.mz-table tr:last-child td { border-bottom: 0; }
.mz-table--mono td { font-family: var(--mz-mono); font-size: 12.5px; }
.mz-table__key { color: var(--mz-text-muted); white-space: nowrap; }

/* ------------------------------------------------------------------ *
 * Stat-Kacheln
 * ------------------------------------------------------------------ */

.mz-stat {
  border: 1px solid var(--mz-border);
  background: var(--mz-surface);
  border-radius: var(--mz-radius);
  padding: 14px 16px;
}

.mz-stat__label {
  font: 600 10.5px/1 var(--mz-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mz-text-muted);
  margin-bottom: 8px;
}

.mz-stat__value {
  font: 700 26px/1.1 var(--mz-font);
  letter-spacing: -.02em;
  color: var(--mz-text-strong);
  font-variant-numeric: tabular-nums;
}

.mz-stat__unit { font-size: 14px; font-weight: 600; color: var(--mz-text-muted); margin-left: 3px; }
.mz-stat__note { margin-top: 6px; font-size: 12px; color: var(--mz-text-muted); }
.mz-stat--ok     .mz-stat__value { color: var(--mz-ok); }
.mz-stat--warn   .mz-stat__value { color: var(--mz-warn); }
.mz-stat--danger .mz-stat__value { color: var(--mz-danger); }

/* ------------------------------------------------------------------ *
 * Pills / Badges
 * ------------------------------------------------------------------ */

.mz-pill {
  display: inline-block;
  font: 700 10.5px/1 var(--mz-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--mz-text-muted);
  white-space: nowrap;
}

.mz-pill--ok      { color: var(--mz-ok); }
.mz-pill--warn    { color: var(--mz-warn); }
.mz-pill--danger  { color: var(--mz-danger); }
.mz-pill--info    { color: var(--mz-info); }
.mz-pill--accent  { color: var(--mz-accent); }

/* Ausgefuellte Variante fuer die eine Aussage, die heraussticht */
.mz-pill--solid {
  border-color: transparent;
  background: currentColor;
}
.mz-pill--solid > span { color: var(--mz-bg); }

/* ------------------------------------------------------------------ *
 * Metadaten-Block — Key/Value-Kopf eines Reports
 * ------------------------------------------------------------------ */

.mz-meta {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 6px 18px;
  margin: var(--mz-gap) 0 26px;
  padding: 16px 18px;
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  background: var(--mz-surface);
  font-size: 13px;
  line-height: 1.55;
}

.mz-meta__key {
  font: 600 11px/1.5 var(--mz-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mz-text-muted);
}

.mz-meta__value { color: var(--mz-text); }

/* ------------------------------------------------------------------ *
 * Befund-Liste — nummerierte Aussagen mit Severity
 * ------------------------------------------------------------------ */

.mz-findings { list-style: none; margin: var(--mz-gap) 0; padding: 0; }

.mz-finding {
  border-left: 3px solid var(--mz-border);
  padding: 10px 0 10px 14px;
  margin-bottom: 12px;
}

.mz-finding__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.mz-finding__id {
  font: 700 12px/1 var(--mz-mono);
  color: var(--mz-text-strong);
}

.mz-finding__body { font-size: 13.5px; line-height: 1.6; color: var(--mz-text); }
.mz-finding--ok     { border-left-color: var(--mz-ok); }
.mz-finding--warn   { border-left-color: var(--mz-warn); }
.mz-finding--danger { border-left-color: var(--mz-danger); }

/* ------------------------------------------------------------------ *
 * Cross-Refs — Verweisleiste am Fuss
 * ------------------------------------------------------------------ */

.mz-crossrefs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 34px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--mz-border-soft);
}

.mz-crossref {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius-sm);
  background: var(--mz-surface);
  color: var(--mz-text);
  font-size: 12.5px;
  text-decoration: none;
}

.mz-crossref:hover { border-color: var(--mz-accent); color: var(--mz-text-strong); }

.mz-footer {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--mz-border-soft);
  font: 11.5px/1.6 var(--mz-mono);
  color: var(--mz-text-muted);
}

/* ------------------------------------------------------------------ *
 * Diagramm-Rahmen — chart.js braucht einen Container mit fester Hoehe
 * ------------------------------------------------------------------ */

.mz-chart {
  position: relative;
  height: 300px;
  margin: var(--mz-gap) 0;
  padding: 14px;
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  background: var(--mz-surface);
}

.mz-chart--tall { height: 420px; }

/* ------------------------------------------------------------------ *
 * Wer Bewegung abgewaehlt hat, bekommt keine.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .mz-fx-canvas { display: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}