/*!
 * mzone-ui 1.3.0 — Design-Vokabular fuer maierzone-Artefakte
 *
 * Neu in 1.3.0 (B10, FUNDAMENT): Report-Vokabular fuer Struktur, die bisher
 * fehlte — Diagramm-Rahmen, In-Seiten-Navigation, Bildunterschriften,
 * Zeitleiste, Legende und kompakte Key/Value-Paare (mz-dgm, mz-nav,
 * mz-figure, mz-timeline, mz-legend, mz-kv) sowie mz-collapse als
 * CSS-only-Accordion (natives <details>, kein JS-Modul noetig).
 * Alles aus 1.0.0/1.1.0/1.2.0 bleibt unveraendert gueltig.
 *
 * 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&szlig;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; }

/* ------------------------------------------------------------------ *
 * Effekt-Flaechen (1.1.0)
 * ------------------------------------------------------------------ */

/*
 * Overlay ueber einem Container. Anders als .mz-fx-canvas wird es bei
 * reduced-motion NICHT ausgeblendet: die Module zeichnen dort ihr
 * stehendes Bild hinein — ein Partikeltext ohne Flug ist immer noch Text.
 */
.mz-fx-overlay {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.mz-fx-overlay--fixed { position: fixed; }

/* Geisterschicht von fx-glitch. Nie anklickbar, nie vorgelesen. */
.mz-fx-ghost { pointer-events: none; }

/*
 * Titelflaeche fuer fx-hero, fx-particle-reveal und fx-ripple. Der Inhalt
 * liegt ueber dem Effekt, weil der Effekt-Canvas z-index 0 behaelt.
 */
.mz-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 32px 24px;
  margin: var(--mz-gap) 0;
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  background: var(--mz-surface);
  isolation: isolate;
}

.mz-hero > *:not(canvas) { position: relative; z-index: 1; }
.mz-hero--tall { min-height: 340px; }

/* ------------------------------------------------------------------ *
 * Scroll-Choreographie (1.1.0) — Zustaende, die fx-scroll umschaltet
 * ------------------------------------------------------------------ */

.mz-reveal {
  opacity: 0;
  transform: translateY(var(--mz-reveal-y, 18px));
  transition:
    opacity var(--mz-reveal-duration, 600ms) ease var(--mz-reveal-delay, 0ms),
    transform var(--mz-reveal-duration, 600ms) cubic-bezier(.22, .61, .36, 1) var(--mz-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.mz-reveal--in {
  opacity: 1;
  transform: none;
}

.mz-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--mz-accent);
  z-index: 80;
  pointer-events: none;
}

/* Sichtbar fuer Screenreader, unsichtbar auf dem Bildschirm. Wird von
 * fx-decrypt und fx-particle-reveal gesetzt, damit auf Canvas gemalter
 * oder verrauschter Text trotzdem vorgelesen wird. */
.mz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ *
 * Bedienelemente (1.1.0) — fuer Artefakte, die etwas zum Drehen haben
 * ------------------------------------------------------------------ */

.mz-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: flex-end;
  margin: var(--mz-gap) 0;
  padding: 14px 16px;
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  background: var(--mz-surface-alt);
}

.mz-control { display: flex; flex-direction: column; gap: 6px; min-width: 140px; }

.mz-control__label {
  font: 600 10.5px/1 var(--mz-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mz-text-muted);
}

.mz-control__value {
  font: 600 11px/1 var(--mz-mono);
  color: var(--mz-text-strong);
  font-variant-numeric: tabular-nums;
}

.mz-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--mz-accent);
  border-radius: var(--mz-radius-sm);
  background: transparent;
  color: var(--mz-accent);
  font: 700 11.5px/1 var(--mz-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.mz-btn:hover { background: var(--mz-accent); color: var(--mz-bg); }
.mz-btn:focus-visible { outline: 2px solid var(--mz-info); outline-offset: 2px; }
.mz-btn[aria-pressed="true"] { background: var(--mz-accent); color: var(--mz-bg); }

.mz-btn--ghost { border-color: var(--mz-border); color: var(--mz-text); }
.mz-btn--ghost:hover { background: var(--mz-surface); color: var(--mz-text-strong); border-color: var(--mz-accent); }

.mz-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--mz-border);
  cursor: pointer;
}

.mz-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mz-accent);
  border: 0;
}

.mz-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--mz-accent);
}

.mz-range:focus-visible { outline: 2px solid var(--mz-info); outline-offset: 4px; }

.mz-select {
  padding: 7px 10px;
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius-sm);
  background: var(--mz-surface);
  color: var(--mz-text);
  font: 12px/1.3 var(--mz-mono);
}

/* ------------------------------------------------------------------ *
 * Report-Vokabular (B10, 1.3.0)
 * ------------------------------------------------------------------ */

/* Rahmen fuer Hand-Diagramme (SVG/ASCII/Boxen-und-Pfeile) — anders als
 * .mz-chart ohne feste Hoehe, weil Diagramme in der Breite variieren statt
 * in eine Chart.js-Leinwand zu passen. */
.mz-dgm {
  border: 1px solid var(--mz-border);
  background: var(--mz-surface);
  border-radius: var(--mz-radius);
  padding: 18px;
  margin: var(--mz-gap) 0;
  overflow-x: auto;
}

.mz-dgm svg,
.mz-dgm img { display: block; max-width: 100%; height: auto; }

/* In-Seiten-Navigation zu Abschnitten dieser einen Seite — nicht zu
 * verwechseln mit .mz-crossrefs (Verweise auf ANDERE Seiten, am Fuss). */
.mz-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--mz-gap);
  padding: 10px 12px;
  border: 1px solid var(--mz-border-soft);
  border-radius: var(--mz-radius-sm);
  background: var(--mz-surface-alt);
}

.mz-nav a {
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--mz-text-muted);
  font: 600 12px/1.4 var(--mz-mono);
  text-decoration: none;
}

.mz-nav a:hover,
.mz-nav a[aria-current="true"] { color: var(--mz-text-strong); background: var(--mz-surface); }

/* Bild/Diagramm mit Unterschrift. <figcaption> traegt die Beschriftung —
 * kein eigenes BEM-Kind noetig, das Element ist schon semantisch. */
.mz-figure { margin: var(--mz-gap) 0; }

.mz-figure > :first-child {
  display: block;
  max-width: 100%;
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
}

.mz-figure figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mz-text-muted);
  text-align: center;
}

/* Zeitleiste fuer Verlauf/Roadmap-Darstellung. */
.mz-timeline {
  list-style: none;
  margin: var(--mz-gap) 0;
  padding: 0;
  border-left: 2px solid var(--mz-border);
}

.mz-timeline__item { position: relative; padding: 0 0 20px 22px; }

.mz-timeline__item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mz-accent);
  border: 2px solid var(--mz-bg);
}

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

.mz-timeline__body { margin-top: 2px; font-size: 13.5px; line-height: 1.6; color: var(--mz-text); }

/* Legende fuer Farben/Symbole in einem Diagramm oder Chart. */
.mz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 10px 0;
  font-size: 12.5px;
  color: var(--mz-text-muted);
}

.mz-legend__item { display: inline-flex; align-items: center; gap: 6px; }

.mz-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: currentColor;
  flex: none;
}

/* Kompaktes, inline gesetztes Key/Value-Paar — anders als .mz-meta (ganzer
 * Block aus vielen Paaren im Grid) ein einzelnes Paar innerhalb von Fliesstext
 * oder einer dichten Aufzaehlung. */
.mz-kv { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; }

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

.mz-kv__value { color: var(--mz-text); font-weight: 600; }

/* CSS-only-Accordion auf nativem <details>/<summary> — kein JS-Modul noetig
 * (R29: deckt den Accordion-Bedarf ab). */
.mz-collapse {
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius);
  background: var(--mz-surface);
  margin: 10px 0;
  overflow: hidden;
}

.mz-collapse summary {
  cursor: pointer;
  padding: 12px 16px;
  font: 600 13.5px/1.4 var(--mz-font);
  color: var(--mz-text-strong);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.mz-collapse summary::-webkit-details-marker { display: none; }

.mz-collapse summary::after {
  content: "+";
  font: 700 16px/1 var(--mz-mono);
  color: var(--mz-text-muted);
  transition: transform .2s ease;
}

.mz-collapse[open] summary::after { transform: rotate(45deg); }

.mz-collapse__body {
  padding: 0 16px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--mz-text);
}

/* Theme-Schalter (R14, 1.3.0). */
.mz-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius-sm);
  background: var(--mz-surface);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.mz-theme-toggle:hover { border-color: var(--mz-accent); }
.mz-theme-toggle:focus-visible { outline: 2px solid var(--mz-info); outline-offset: 2px; }

/* ------------------------------------------------------------------ *
 * Interaktive Komponenten (R29, 1.3.0) — opt-in Vanilla-JS-Module,
 * ein Script-Tag, progressive enhancement.
 * ------------------------------------------------------------------ */

.mz-tabs { margin: var(--mz-gap) 0; }

.mz-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--mz-border);
  margin-bottom: 14px;
}

.mz-tabs__tab {
  padding: 8px 14px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--mz-radius-sm) var(--mz-radius-sm) 0 0;
  background: transparent;
  color: var(--mz-text-muted);
  font: 600 12.5px/1.4 var(--mz-mono);
  letter-spacing: .04em;
  cursor: pointer;
}

.mz-tabs__tab:hover { color: var(--mz-text-strong); }
.mz-tabs__tab:focus-visible { outline: 2px solid var(--mz-info); outline-offset: 2px; }

.mz-tabs__tab[aria-selected="true"] {
  color: var(--mz-text-strong);
  border-color: var(--mz-border);
  background: var(--mz-surface);
  border-bottom-color: var(--mz-surface);
}

.mz-tabs__panel { font-size: 13.5px; line-height: 1.6; color: var(--mz-text); }
.mz-tabs__panel[hidden] { display: none; }

.mz-filter-table { margin: var(--mz-gap) 0; }

/* Gemeinsames Aussehen fuer beide Suchfelder — mz-search (freistehend,
 * filtert einen benannten scope) und mz-filter-table__search (vom Modul
 * selbst erzeugt, sitzt direkt ueber "seiner" Tabelle). */
.mz-search,
.mz-filter-table__search {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-bottom: 10px;
  padding: 7px 10px;
  border: 1px solid var(--mz-border);
  border-radius: var(--mz-radius-sm);
  background: var(--mz-surface);
  color: var(--mz-text);
  font: 12.5px/1.4 var(--mz-mono);
}

.mz-search:focus-visible,
.mz-filter-table__search:focus-visible { outline: 2px solid var(--mz-info); outline-offset: 2px; }

.mz-filter-table th[aria-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.mz-filter-table th[aria-sort="ascending"]::after { content: " \25B2"; font-size: 9px; }
.mz-filter-table th[aria-sort="descending"]::after { content: " \25BC"; font-size: 9px; }

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

@media (prefers-reduced-motion: reduce) {
  .mz-fx-canvas { display: none; }
  /* Kein display:none fuer .mz-reveal-Elemente — sie muessen sichtbar
   * sein, nicht weg. Der Zustand ohne .mz-reveal--in waere unsichtbar. */
  .mz-reveal { opacity: 1; transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------ *
 * Druck (R14, 1.3.0) — dekorative/interaktive Flaechen weg, dunkler
 * Hintergrund wird nicht mitgedruckt, mz-collapse zeigt seinen Inhalt auch
 * geschlossen (ein Klick ist auf Papier nicht nachholbar).
 * ------------------------------------------------------------------ */

@media print {
  .mz-fx-canvas, .mz-fx-overlay, .mz-fx-ghost, .mz-scroll-progress,
  .mz-controls, .mz-nav, .mz-theme-toggle { display: none !important; }

  .mz-body { background: #fff; color: #000; }
  .mz-page { max-width: 100%; padding: 0; }

  .mz-card, .mz-stat, .mz-meta, .mz-dgm, .mz-chart, .mz-hero,
  .mz-table-wrap, .mz-collapse {
    background: #fff;
    border-color: #999;
  }

  .mz-crossref { border-color: #999; }

  /* <details> zeigt geschlossenen Inhalt sonst gar nicht — auf Papier gibt
   * es keinen Klick zum Aufklappen. */
  .mz-collapse:not([open]) > .mz-collapse__body { display: block !important; }
  .mz-collapse summary::after { display: none; }
}