/*!
 * mzone-ui 1.8.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.
 *
 * Neu in 1.4.0 (TRANSITIONS): mz-transitions — 27 Transition-Patterns als
 * mz-t-*-Klassen (self-contained, Tokens an der Basisklasse, Zustaende als
 * BEM-Modifier, eigener prefers-reduced-motion-Guard pro Pattern) plus das
 * Begleitmodul mz-transitions.js als generischer Zustands-Toggler.
 * Jedes Pattern steht zwischen @snippet-Markern — der Playground schneidet
 * daraus die Copy-CSS-Snippets. Ideen inspiriert von transitions.dev,
 * Implementierung eigenstaendig (kein Code uebernommen).
 *
 * Neu in 1.5.0 (SUCHE & NAVIGATION): zwei Module ohne eigenes CSS-Vokabular —
 * mz-sitesearch (Suche ueber alle publizierten Seiten via /search-index.json)
 * und mz-toc (Inhaltsverzeichnis aus h2/h3, befuellt mz-nav zur Laufzeit).
 * Beide bauen auf vorhandenen Klassen auf (mz-search, mz-card, mz-nav), damit
 * sie in Bestandsseiten ohne Neu-Publish greifen.
 *
 * 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;

  /* Schriftgroessen wachsen mit dem Viewport statt an Haltepunkten zu springen.
     Die Bibliothek hat bewusst KEINE Layout-Breakpoints -- clamp() ersetzt sie,
     statt welche einzufuehren. Vorbild ist .mz-title, das diesen Weg seit 1.2.0
     als Einzelfall ging; hier wird er zur Regel (1.6.0). */
  --mz-fs-2xs: 9px;
  --mz-fs-xs: clamp(11.5px, 0.20vw + 11px, 12.5px);
  --mz-fs-sm: clamp(12.5px, 0.28vw + 12px, 13.5px);
  --mz-fs-base: clamp(15px, 0.30vw + 14px, 16px);
  --mz-fs-md: clamp(16px, 0.35vw + 15px, 17px);
  --mz-fs-lg: clamp(19px, 0.90vw + 16px, 22px);
  --mz-fs-xl: clamp(26px, 4vw, 40px);

  --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: var(--mz-fs-xl);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--mz-text-strong);
}

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

.mz-h2 {
  margin: 42px 0 14px;
  font-size: var(--mz-fs-lg);
  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: var(--mz-fs-base);
  font-weight: 700;
  color: var(--mz-text-strong);
}

.mz-lead { font-size: var(--mz-fs-md); line-height: 1.6; color: var(--mz-text-strong); }
.mz-muted { color: var(--mz-text-muted); }
.mz-small { font-size: var(--mz-fs-xs); 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: var(--mz-fs-xs);
  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)); }

/* Bento: feste Spalten statt auto-fit, damit Kacheln verlaesslich spannen
   koennen. auto-fit weiss zur Laufzeit nicht, wie viele Spalten es gibt --
   span 2 waere dort bei einer einzigen Spalte ein Ueberlauf. */
.mz-grid--bento {
  container-type: inline-size;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
}

.mz-grid__cell { min-width: 0; }

/* Erst ab genug Breite lohnen vier Spalten. Container- statt Media-Query:
   ein Bento in einer schmalen Spalte soll umbrechen, auch wenn das FENSTER
   breit ist -- die Bibliothek fuehrt bewusst keine Layout-Breakpoints. */
@container (min-width: 720px) {
  .mz-grid--bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mz-grid__cell--wide { grid-column: span 2; }
  .mz-grid__cell--tall { grid-row: span 2; }
  .mz-grid__cell--big  { grid-column: span 2; grid-row: span 2; }
}

/* ------------------------------------------------------------------ *
 * 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: var(--mz-fs-sm);
  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: var(--mz-fs-xs); }
.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: var(--mz-fs-sm); font-weight: 600; color: var(--mz-text-muted); margin-left: 3px; }
.mz-stat__note { margin-top: 6px; font-size: var(--mz-fs-xs); 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: var(--mz-fs-sm);
  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: var(--mz-fs-sm); 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: var(--mz-fs-xs);
  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); }

/* Zweite Ebene optisch zuruecknehmen. Das Attribut setzt mz-toc (1.5.0); von
 * Hand gepflegte mz-nav-Links haben es nicht und bleiben unveraendert. */
.mz-nav a[data-level="3"] { font-weight: 400; opacity: .78; }

/* 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: var(--mz-fs-xs);
  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: var(--mz-fs-sm); 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: var(--mz-fs-xs);
  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: var(--mz-fs-sm); }

.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: var(--mz-fs-sm);
  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: var(--mz-fs-base);
  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: var(--mz-fs-sm); 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: var(--mz-fs-2xs); }
.mz-filter-table th[aria-sort="descending"]::after { content: " \25BC"; font-size: var(--mz-fs-2xs); }

/* ------------------------------------------------------------------ *
 * Transitions (1.4.0) — 27 Interaktions-Patterns als mz-t-*-Klassen.
 *
 * Self-contained pro Pattern: Stellschrauben als Custom Properties an der
 * Basisklasse (NICHT auf :root), Zustaende als BEM-Modifier, eigener
 * reduced-motion-Guard im Block. Die @snippet-Marker grenzen exakt den
 * Text ab, den der Playground-Copy-Button in die Zwischenablage legt —
 * Marker nicht verschieben und pro Pattern genau ein Paar.
 * Zustaende toggelt wahlweise eigenes JS oder mz-transitions.js.
 * ------------------------------------------------------------------ */

/* @snippet mz-t-card-resize */
/* Karte faehrt weich auf/zu (Hoehe per grid-rows-Trick, ohne feste px). */
.mz-t-card-resize {
  --mz-t-card-resize-duration: 320ms;
  --mz-t-card-resize-easing: cubic-bezier(.4, 0, .2, 1);
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--mz-t-card-resize-duration) var(--mz-t-card-resize-easing);
}
.mz-t-card-resize--open { grid-template-rows: 1fr; }
.mz-t-card-resize__body { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .mz-t-card-resize { transition: none; }
}
/* @end */

/* @snippet mz-t-number-pop */
/* Ziffern fallen nacheinander mit Blur herein (Zaehler, KPIs). */
.mz-t-number-pop {
  --mz-t-number-pop-duration: 420ms;
  --mz-t-number-pop-stagger: 60ms;
  display: inline-flex;
}
.mz-t-number-pop__digit {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) scale(1.15);
  filter: blur(4px);
}
.mz-t-number-pop--in .mz-t-number-pop__digit {
  animation: mz-t-number-pop-in var(--mz-t-number-pop-duration) cubic-bezier(.2, .9, .3, 1.15) both;
}
.mz-t-number-pop--in .mz-t-number-pop__digit:nth-child(2) { animation-delay: calc(var(--mz-t-number-pop-stagger) * 1); }
.mz-t-number-pop--in .mz-t-number-pop__digit:nth-child(3) { animation-delay: calc(var(--mz-t-number-pop-stagger) * 2); }
.mz-t-number-pop--in .mz-t-number-pop__digit:nth-child(4) { animation-delay: calc(var(--mz-t-number-pop-stagger) * 3); }
.mz-t-number-pop--in .mz-t-number-pop__digit:nth-child(5) { animation-delay: calc(var(--mz-t-number-pop-stagger) * 4); }
.mz-t-number-pop--in .mz-t-number-pop__digit:nth-child(6) { animation-delay: calc(var(--mz-t-number-pop-stagger) * 5); }
.mz-t-number-pop--in .mz-t-number-pop__digit:nth-child(7) { animation-delay: calc(var(--mz-t-number-pop-stagger) * 6); }
.mz-t-number-pop--in .mz-t-number-pop__digit:nth-child(8) { animation-delay: calc(var(--mz-t-number-pop-stagger) * 7); }
@keyframes mz-t-number-pop-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-number-pop__digit { opacity: 1; transform: none; filter: none; animation: none; }
}
/* @end */

/* @snippet mz-t-badge */
/* Zaehl-Badge rutscht diagonal herein und schnellt mit Overshoot auf seine Groesse. */
.mz-t-badge {
  --mz-t-badge-duration: 480ms;
  position: relative;
  display: inline-block;
}
.mz-t-badge__count {
  position: absolute;
  top: -6px;
  right: -6px;
  opacity: 0;
  transform: translate(-10px, 10px) scale(.3);
}
.mz-t-badge--in .mz-t-badge__count {
  animation: mz-t-badge-pop var(--mz-t-badge-duration) cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes mz-t-badge-pop {
  0% { opacity: 0; transform: translate(-10px, 10px) scale(.3); }
  60% { opacity: 1; transform: translate(1px, -1px) scale(1.18); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-badge__count { opacity: 1; transform: none; animation: none; }
}
/* @end */

/* @snippet mz-t-text-swap */
/* Zwei Textzustaende tauschen mit Blur und Gegenbewegung. */
.mz-t-text-swap {
  --mz-t-text-swap-duration: 260ms;
  position: relative;
  display: inline-block;
}
.mz-t-text-swap__a,
.mz-t-text-swap__b {
  display: inline-block;
  transition: opacity var(--mz-t-text-swap-duration) ease,
              transform var(--mz-t-text-swap-duration) ease,
              filter var(--mz-t-text-swap-duration) ease;
}
.mz-t-text-swap__b {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(.45em);
  filter: blur(3px);
}
.mz-t-text-swap--alt .mz-t-text-swap__a { opacity: 0; transform: translateY(-.45em); filter: blur(3px); }
.mz-t-text-swap--alt .mz-t-text-swap__b { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .mz-t-text-swap__a, .mz-t-text-swap__b { transition: none; }
}
/* @end */

/* @snippet mz-t-dropdown */
/* Menue klappt vom Ankerpunkt her auf (transform-origin oben). */
.mz-t-dropdown {
  --mz-t-dropdown-duration: 200ms;
  transform-origin: top center;
  opacity: 0;
  transform: scaleY(.92) translateY(-4px);
  visibility: hidden;
  transition: opacity var(--mz-t-dropdown-duration) ease,
              transform var(--mz-t-dropdown-duration) ease,
              visibility 0s linear var(--mz-t-dropdown-duration);
}
.mz-t-dropdown--open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-dropdown { transition: none; }
}
/* @end */

/* @snippet mz-t-modal */
/* Dialog skaliert leicht aus dem Hintergrund heraus, Backdrop blendet. */
.mz-t-modal {
  --mz-t-modal-duration: 240ms;
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
  transition: visibility 0s linear var(--mz-t-modal-duration);
}
.mz-t-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / .55);
  opacity: 0;
  transition: opacity var(--mz-t-modal-duration) ease;
}
.mz-t-modal__dialog {
  position: relative;
  opacity: 0;
  transform: scale(.94) translateY(10px);
  transition: opacity var(--mz-t-modal-duration) ease,
              transform var(--mz-t-modal-duration) cubic-bezier(.2, .9, .3, 1.1);
}
.mz-t-modal--open { visibility: visible; transition-delay: 0s; }
.mz-t-modal--open .mz-t-modal__backdrop { opacity: 1; }
.mz-t-modal--open .mz-t-modal__dialog { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mz-t-modal, .mz-t-modal__backdrop, .mz-t-modal__dialog { transition: none; }
}
/* @end */

/* @snippet mz-t-panel */
/* Seitenpanel faehrt von rechts herein (Detailansicht, Einstellungen). */
.mz-t-panel {
  --mz-t-panel-duration: 280ms;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  transform: translateX(102%);
  visibility: hidden;
  transition: transform var(--mz-t-panel-duration) cubic-bezier(.4, 0, .2, 1),
              visibility 0s linear var(--mz-t-panel-duration);
}
.mz-t-panel--open { transform: none; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .mz-t-panel { transition: none; }
}
/* @end */

/* @snippet mz-t-page */
/* Zwei Seiten nebeneinander im Track — vor/zurueck per Verschiebung. */
.mz-t-page {
  --mz-t-page-duration: 340ms;
  overflow: hidden;
}
.mz-t-page__track {
  display: flex;
  transition: transform var(--mz-t-page-duration) cubic-bezier(.4, 0, .2, 1);
}
.mz-t-page__page { flex: 0 0 100%; min-width: 0; }
.mz-t-page--next .mz-t-page__track { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) {
  .mz-t-page__track { transition: none; }
}
/* @end */

/* @snippet mz-t-icon-swap */
/* Icon-Tausch mit Skalierung und Blur (Play/Pause, Stern leer/voll). */
.mz-t-icon-swap {
  --mz-t-icon-swap-duration: 220ms;
  display: inline-grid;
}
.mz-t-icon-swap__a,
.mz-t-icon-swap__b {
  grid-area: 1 / 1;
  transition: opacity var(--mz-t-icon-swap-duration) ease,
              transform var(--mz-t-icon-swap-duration) ease,
              filter var(--mz-t-icon-swap-duration) ease;
}
.mz-t-icon-swap__b { opacity: 0; transform: scale(.6); filter: blur(3px); }
.mz-t-icon-swap--alt .mz-t-icon-swap__a { opacity: 0; transform: scale(.6); filter: blur(3px); }
.mz-t-icon-swap--alt .mz-t-icon-swap__b { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .mz-t-icon-swap__a, .mz-t-icon-swap__b { transition: none; }
}
/* @end */

/* @snippet mz-t-success */
/* Bestaetigung: Kreis bobt herein, Haken zeichnet sich (SVG stroke-draw). */
.mz-t-success {
  --mz-t-success-duration: 520ms;
  --mz-t-success-len: 34;
  display: inline-block;
}
.mz-t-success__circle { opacity: 0; transform: translateY(3px) scale(.85); transform-origin: center; }
.mz-t-success__check { stroke-dasharray: var(--mz-t-success-len); stroke-dashoffset: var(--mz-t-success-len); }
.mz-t-success--done .mz-t-success__circle {
  animation: mz-t-success-pop var(--mz-t-success-duration) cubic-bezier(.34, 1.4, .64, 1) forwards;
}
.mz-t-success--done .mz-t-success__check {
  animation: mz-t-success-draw var(--mz-t-success-duration) ease-out calc(var(--mz-t-success-duration) * .35) forwards;
}
@keyframes mz-t-success-pop {
  0% { opacity: 0; transform: translateY(4px) scale(.8); }
  60% { opacity: 1; transform: translateY(-1px) scale(1.06); }
  100% { opacity: 1; transform: none; }
}
@keyframes mz-t-success-draw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-success__circle { opacity: 1; transform: none; animation: none; }
  .mz-t-success__check { stroke-dashoffset: 0; animation: none; }
}
/* @end */

/* @snippet mz-t-avatars */
/* Avatar-Gruppe: der gehoverte springt hoch, die Nachbarn folgen abgeschwaecht. */
.mz-t-avatars {
  --mz-t-avatars-duration: 260ms;
  --mz-t-avatars-lift: 8px;
  display: flex;
}
.mz-t-avatars__avatar {
  margin-left: -8px;
  transition: transform var(--mz-t-avatars-duration) cubic-bezier(.34, 1.56, .64, 1);
}
.mz-t-avatars__avatar:first-child { margin-left: 0; }
.mz-t-avatars__avatar:hover { transform: translateY(calc(var(--mz-t-avatars-lift) * -1)) scale(1.1); }
.mz-t-avatars__avatar:hover + .mz-t-avatars__avatar,
.mz-t-avatars__avatar:has(+ .mz-t-avatars__avatar:hover) {
  transform: translateY(calc(var(--mz-t-avatars-lift) * -.5)) scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-avatars__avatar { transition: none; }
}
/* @end */

/* @snippet mz-t-shake */
/* Validierungsfehler: horizontales Shake, laeuft einmal und endet neutral. */
.mz-t-shake {
  --mz-t-shake-duration: 420ms;
  --mz-t-shake-color: #e5484d;
}
.mz-t-shake--error {
  border-color: var(--mz-t-shake-color);
  animation: mz-t-shake-x var(--mz-t-shake-duration) cubic-bezier(.36, .07, .19, .97);
}
@keyframes mz-t-shake-x {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-shake--error { animation: none; }
}
/* @end */

/* @snippet mz-t-dissolve */
/* Inhalt loest sich auf (Blur + Spacing) — z.B. beim Leeren eines Felds. */
.mz-t-dissolve {
  --mz-t-dissolve-duration: 300ms;
  display: inline-block;
}
.mz-t-dissolve__value {
  display: inline-block;
  transition: opacity var(--mz-t-dissolve-duration) ease,
              transform var(--mz-t-dissolve-duration) ease,
              filter var(--mz-t-dissolve-duration) ease,
              letter-spacing var(--mz-t-dissolve-duration) ease;
}
.mz-t-dissolve--out .mz-t-dissolve__value {
  opacity: 0;
  transform: translateY(-3px);
  filter: blur(6px);
  letter-spacing: .25em;
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-dissolve__value { transition: none; }
}
/* @end */

/* @snippet mz-t-skeleton */
/* Ladeplatzhalter mit Schimmer, der dem echten Inhalt weicht. */
.mz-t-skeleton {
  --mz-t-skeleton-duration: 360ms;
  --mz-t-skeleton-base: #1c242e;
  --mz-t-skeleton-hi: #2a333f;
  position: relative;
}
.mz-t-skeleton__placeholder {
  background: linear-gradient(100deg,
    var(--mz-t-skeleton-base) 40%, var(--mz-t-skeleton-hi) 50%, var(--mz-t-skeleton-base) 60%);
  background-size: 220% 100%;
  animation: mz-t-skeleton-scan 1.4s linear infinite;
  transition: opacity var(--mz-t-skeleton-duration) ease, visibility 0s linear var(--mz-t-skeleton-duration);
}
.mz-t-skeleton__content { opacity: 0; transition: opacity var(--mz-t-skeleton-duration) ease; }
.mz-t-skeleton--loaded .mz-t-skeleton__placeholder { opacity: 0; visibility: hidden; animation: none; }
.mz-t-skeleton--loaded .mz-t-skeleton__content { opacity: 1; }
@keyframes mz-t-skeleton-scan {
  to { background-position: -220% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-skeleton__placeholder { animation: none; transition: none; }
  .mz-t-skeleton__content { transition: none; }
}
/* @end */

/* @snippet mz-t-shimmer */
/* Text, ueber den ein Glanzstreifen laeuft (Ladezustand, Hervorhebung). */
.mz-t-shimmer {
  --mz-t-shimmer-duration: 2.2s;
  --mz-t-shimmer-base: #8a94a3;
  --mz-t-shimmer-hi: #f4f7fb;
  background: linear-gradient(110deg,
    var(--mz-t-shimmer-base) 42%, var(--mz-t-shimmer-hi) 50%, var(--mz-t-shimmer-base) 58%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mz-t-shimmer-sweep var(--mz-t-shimmer-duration) linear infinite;
}
@keyframes mz-t-shimmer-sweep {
  to { background-position: -220% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-shimmer { animation: none; background: none; color: var(--mz-t-shimmer-base); }
}
/* @end */

/* @snippet mz-t-tabs-slide */
/* Tab-Leiste mit gleitendem Indikator. Leichtgewichtige Alternative zu
 * mz-tabs, wenn nur der Slider-Reiz ohne ARIA-Verhalten gebraucht wird. */
.mz-t-tabs-slide {
  --mz-t-tabs-slide-duration: 240ms;
  position: relative;
  display: flex;
  gap: 4px;
}
.mz-t-tabs-slide__tab {
  padding: 8px 14px;
  cursor: pointer;
  transition: color var(--mz-t-tabs-slide-duration) ease;
}
.mz-t-tabs-slide__tab--active { font-weight: 600; }
.mz-t-tabs-slide__indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  transition: transform var(--mz-t-tabs-slide-duration) cubic-bezier(.4, 0, .2, 1),
              width var(--mz-t-tabs-slide-duration) cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-tabs-slide__tab, .mz-t-tabs-slide__indicator { transition: none; }
}
/* @end */

/* @snippet mz-t-tooltip */
/* Tooltip blendet oberhalb des Traegers ein, bei Hover und Fokus. */
.mz-t-tooltip {
  --mz-t-tooltip-duration: 180ms;
  position: relative;
  display: inline-block;
}
.mz-t-tooltip__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mz-t-tooltip-duration) ease,
              transform var(--mz-t-tooltip-duration) ease,
              visibility 0s linear var(--mz-t-tooltip-duration);
  pointer-events: none;
}
.mz-t-tooltip:hover .mz-t-tooltip__tip,
.mz-t-tooltip:focus-visible .mz-t-tooltip__tip,
.mz-t-tooltip:focus-within .mz-t-tooltip__tip {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-tooltip__tip { transition: none; }
}
/* @end */

/* @snippet mz-t-reveal */
/* Textzeilen steigen versetzt herein (Abschnitts-Einstieg). */
.mz-t-reveal {
  --mz-t-reveal-duration: 420ms;
  --mz-t-reveal-stagger: 70ms;
}
.mz-t-reveal__line {
  display: block;
  opacity: 0;
  transform: translateY(.6em);
  transition: opacity var(--mz-t-reveal-duration) ease,
              transform var(--mz-t-reveal-duration) cubic-bezier(.2, .8, .3, 1);
}
.mz-t-reveal--in .mz-t-reveal__line { opacity: 1; transform: none; }
.mz-t-reveal--in .mz-t-reveal__line:nth-child(2) { transition-delay: calc(var(--mz-t-reveal-stagger) * 1); }
.mz-t-reveal--in .mz-t-reveal__line:nth-child(3) { transition-delay: calc(var(--mz-t-reveal-stagger) * 2); }
.mz-t-reveal--in .mz-t-reveal__line:nth-child(4) { transition-delay: calc(var(--mz-t-reveal-stagger) * 3); }
.mz-t-reveal--in .mz-t-reveal__line:nth-child(5) { transition-delay: calc(var(--mz-t-reveal-stagger) * 4); }
.mz-t-reveal--in .mz-t-reveal__line:nth-child(6) { transition-delay: calc(var(--mz-t-reveal-stagger) * 5); }
@media (prefers-reduced-motion: reduce) {
  .mz-t-reveal__line { opacity: 1; transform: none; transition: none; }
}
/* @end */

/* @snippet mz-t-tilt */
/* Karte neigt sich in 3D. Pur CSS: dezenter Hover-Tilt. Feiner per
 * mz-transitions.js (Pattern 'tilt') — das Modul setzt --mz-t-tilt-x/y
 * aus der Zeigerposition. */
.mz-t-tilt {
  --mz-t-tilt-duration: 160ms;
  --mz-t-tilt-x: 0deg;
  --mz-t-tilt-y: 0deg;
  transform: perspective(700px) rotateX(var(--mz-t-tilt-x)) rotateY(var(--mz-t-tilt-y));
  transition: transform var(--mz-t-tilt-duration) ease-out;
}
.mz-t-tilt:hover { --mz-t-tilt-x: -3deg; --mz-t-tilt-y: 4deg; }
@media (prefers-reduced-motion: reduce) {
  .mz-t-tilt { transition: none; transform: none; }
}
/* @end */

/* @snippet mz-t-morph */
/* Plus-Button: das Plus dreht sich zum X, das Menue waechst aus dem Button. */
.mz-t-morph {
  --mz-t-morph-duration: 240ms;
  position: relative;
  display: inline-block;
}
.mz-t-morph__icon {
  display: inline-block;
  transition: transform var(--mz-t-morph-duration) cubic-bezier(.34, 1.56, .64, 1);
}
.mz-t-morph--open .mz-t-morph__icon { transform: rotate(45deg); }
.mz-t-morph__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  transform-origin: top right;
  transform: scale(.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mz-t-morph-duration) ease,
              transform var(--mz-t-morph-duration) cubic-bezier(.34, 1.4, .64, 1),
              visibility 0s linear var(--mz-t-morph-duration);
}
.mz-t-morph--open .mz-t-morph__menu {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-morph__icon, .mz-t-morph__menu { transition: none; }
}
/* @end */

/* @snippet mz-t-accordion */
/* Aufklapper mit weicher Hoehe (grid-rows-Trick). Wer semantisch korrektes
 * Auf/Zu ohne JS will, nimmt stattdessen mz-collapse (natives <details>). */
.mz-t-accordion {
  --mz-t-accordion-duration: 280ms;
}
.mz-t-accordion__head {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.mz-t-accordion__head::after {
  content: "+";
  transition: transform var(--mz-t-accordion-duration) ease;
}
.mz-t-accordion--open .mz-t-accordion__head::after { transform: rotate(45deg); }
.mz-t-accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--mz-t-accordion-duration) cubic-bezier(.4, 0, .2, 1);
}
.mz-t-accordion__inner { min-height: 0; overflow: hidden; }
.mz-t-accordion--open .mz-t-accordion__body { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) {
  .mz-t-accordion__head::after, .mz-t-accordion__body { transition: none; }
}
/* @end */

/* @snippet mz-t-toast */
/* Meldung steigt von unten herein und steht dann. Ausblenden: --in wegnehmen. */
.mz-t-toast {
  --mz-t-toast-duration: 260ms;
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translate(-50%, 12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mz-t-toast-duration) ease,
              transform var(--mz-t-toast-duration) cubic-bezier(.2, .9, .3, 1.1),
              visibility 0s linear var(--mz-t-toast-duration);
}
.mz-t-toast--in {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-toast { transition: none; }
}
/* @end */

/* @snippet mz-t-like */
/* Reaktion: Icon schnellt auf und faerbt sich (Herz, Stern, Daumen). */
.mz-t-like {
  --mz-t-like-duration: 420ms;
  --mz-t-like-color: #e5484d;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: color calc(var(--mz-t-like-duration) * .6) ease;
}
.mz-t-like__icon { display: inline-block; }
.mz-t-like--liked { color: var(--mz-t-like-color); }
.mz-t-like--liked .mz-t-like__icon {
  animation: mz-t-like-pop var(--mz-t-like-duration) cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes mz-t-like-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  70% { transform: scale(.92); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-like--liked .mz-t-like__icon { animation: none; }
}
/* @end */

/* @snippet mz-t-learn */
/* "Mehr erfahren"-Link: Unterstrich waechst, Pfeil rutscht bei Hover. */
.mz-t-learn {
  --mz-t-learn-duration: 200ms;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.mz-t-learn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mz-t-learn-duration) ease;
}
.mz-t-learn__arrow { display: inline-block; transition: transform var(--mz-t-learn-duration) ease; }
.mz-t-learn:hover::after, .mz-t-learn:focus-visible::after { transform: scaleX(1); }
.mz-t-learn:hover .mz-t-learn__arrow, .mz-t-learn:focus-visible .mz-t-learn__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .mz-t-learn::after, .mz-t-learn__arrow { transition: none; }
}
/* @end */

/* @snippet mz-t-checkbox */
/* Checkbox, deren Haken sich beim Anhaken zeichnet (SVG stroke-draw). */
.mz-t-checkbox {
  --mz-t-checkbox-duration: 240ms;
  --mz-t-checkbox-len: 22;
  --mz-t-checkbox-on: #2f81f7;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.mz-t-checkbox__box {
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 4px;
  display: grid;
  place-items: center;
  transition: background var(--mz-t-checkbox-duration) ease,
              border-color var(--mz-t-checkbox-duration) ease;
}
.mz-t-checkbox__check {
  stroke-dasharray: var(--mz-t-checkbox-len);
  stroke-dashoffset: var(--mz-t-checkbox-len);
  transition: stroke-dashoffset var(--mz-t-checkbox-duration) ease-out;
}
.mz-t-checkbox--checked .mz-t-checkbox__box {
  background: var(--mz-t-checkbox-on);
  border-color: var(--mz-t-checkbox-on);
}
.mz-t-checkbox--checked .mz-t-checkbox__check { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .mz-t-checkbox__box, .mz-t-checkbox__check { transition: none; }
}
/* @end */

/* @snippet mz-t-counter */
/* Ziffern klappen wie eine Fallblattanzeige herein (Wert-Sprung). */
.mz-t-counter {
  --mz-t-counter-duration: 380ms;
  --mz-t-counter-stagger: 50ms;
  display: inline-flex;
}
.mz-t-counter__digit {
  display: inline-block;
  opacity: 0;
  transform: rotateX(90deg);
  transform-origin: center bottom;
}
.mz-t-counter--in .mz-t-counter__digit {
  animation: mz-t-counter-flip var(--mz-t-counter-duration) cubic-bezier(.2, .9, .3, 1.1) both;
}
.mz-t-counter--in .mz-t-counter__digit:nth-child(2) { animation-delay: calc(var(--mz-t-counter-stagger) * 1); }
.mz-t-counter--in .mz-t-counter__digit:nth-child(3) { animation-delay: calc(var(--mz-t-counter-stagger) * 2); }
.mz-t-counter--in .mz-t-counter__digit:nth-child(4) { animation-delay: calc(var(--mz-t-counter-stagger) * 3); }
.mz-t-counter--in .mz-t-counter__digit:nth-child(5) { animation-delay: calc(var(--mz-t-counter-stagger) * 4); }
.mz-t-counter--in .mz-t-counter__digit:nth-child(6) { animation-delay: calc(var(--mz-t-counter-stagger) * 5); }
.mz-t-counter--in .mz-t-counter__digit:nth-child(7) { animation-delay: calc(var(--mz-t-counter-stagger) * 6); }
.mz-t-counter--in .mz-t-counter__digit:nth-child(8) { animation-delay: calc(var(--mz-t-counter-stagger) * 7); }
@keyframes mz-t-counter-flip {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mz-t-counter__digit { opacity: 1; transform: none; animation: none; }
}
/* @end */

/* @snippet mz-t-toggle */
/* Schalter: Thumb gleitet, Track faerbt sich. */
.mz-t-toggle {
  --mz-t-toggle-duration: 220ms;
  --mz-t-toggle-on: #2f81f7;
  --mz-t-toggle-off: #3a4450;
  display: inline-block;
  cursor: pointer;
}
.mz-t-toggle__track {
  display: block;
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--mz-t-toggle-off);
  transition: background var(--mz-t-toggle-duration) ease;
}
.mz-t-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--mz-t-toggle-duration) cubic-bezier(.34, 1.56, .64, 1);
}
.mz-t-toggle--on .mz-t-toggle__track { background: var(--mz-t-toggle-on); }
.mz-t-toggle--on .mz-t-toggle__thumb { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) {
  .mz-t-toggle__track, .mz-t-toggle__thumb { transition: none; }
}
/* @end */

/* ------------------------------------------------------------------ *
 * 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; }
}