/*
 * märz Gestaltungsklassen – plg_system_maerz (seit 0.2.0)
 *
 * Opt-in-Klassen für den Builder (Advanced › Class). Alle Klassen tragen das Präfix
 * „mz-“ (Ausnahme: „lt“ für den Gewichtskontrast, so im Designsystem festgelegt).
 *
 * Dieses CSS lädt VOR theme.css und gilt für ALLE Template-Stile (alt und neu).
 * Deshalb: keine globalen Element-Selektoren (h1, a, .uk-button …) – nur eigene Klassen.
 * Regeln, die mit Theme-Regeln kollidieren können, sind doppelt gewichtet (.mz-x.mz-x)
 * oder mit Elternpräfix geschrieben.
 */

/* ======================================================================
   Token
   ====================================================================== */
:root {
  --mz-rot: #C1001F;
  --mz-rot-dunkel: #9E0019;
  --mz-schwarz: #000;
  --mz-text: #111;
  --mz-grau-dunkel: #424242;
  --mz-grau-mittel: #7d7d7d;
  --mz-grau-hell: #d1d1d1;
  --mz-grau-licht: #ededed;
  --mz-blau: #314759;
  --mz-blau-tief: #263947;
  --mz-blau-dunkel: #68788b;
  --mz-blau-mittel: #8b98a9;
  --mz-blau-hell: #afb9c6;
  --mz-blau-licht: #d5dae3;
}

/* Helle Varianten greifen auf allen dunklen Flächen: .uk-light („Text Color: Light“) und die
   Inverse-Flächen von YOOtheme 5/UIkit (Section/Tile/Card Secondary, Overlay, Offcanvas) –
   dort setzt YOOtheme kein .uk-light mehr, sondern --uk-inverse: light. */

/* ======================================================================
   1 · Eyebrow / Kicker
   Text- oder Headline-Element › Advanced › Class: mz-eyebrow
   Nur ohne Produktnamen verwenden (Versalien!).
   ====================================================================== */
.mz-eyebrow.mz-eyebrow {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--mz-rot);
  margin-bottom: 14px;
}
.mz-eyebrow.mz-eyebrow > :last-child { margin-bottom: 0; }
.mz-eyebrow.mz-eyebrow > * { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }

.uk-light .mz-eyebrow.mz-eyebrow,
.uk-section-secondary:not(.uk-preserve-color) .mz-eyebrow.mz-eyebrow,
.uk-tile-secondary:not(.uk-preserve-color) .mz-eyebrow.mz-eyebrow,
.uk-card-secondary.uk-card-body .mz-eyebrow.mz-eyebrow,
.uk-card-secondary > :not([class*="uk-card-media"]) .mz-eyebrow.mz-eyebrow,
.uk-overlay-primary .mz-eyebrow.mz-eyebrow,
.uk-offcanvas-bar .mz-eyebrow.mz-eyebrow { color: var(--mz-blau-hell); }

/* ======================================================================
   2 · Gewichtskontrast in Überschriften
   <h2><strong>Ein Operations Center</strong> <span class="lt">für Ihre KI</span></h2>
   ====================================================================== */
.lt, .mz-lt { font-weight: 300; }

/* ======================================================================
   3 · Akzentstrich über Überschriften (Nachfolger von .h-accent)
   ====================================================================== */
.mz-accent.mz-accent { position: relative; padding-top: 22px; }
.mz-accent.mz-accent::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 56px; height: 5px;
  background: var(--mz-rot);
}
.mz-accent.uk-text-center::before,
.uk-text-center > .mz-accent::before { left: 50%; transform: translateX(-50%); }

/* ======================================================================
   4 · Pipe in Produktnamen (nur Überschriften)
   märz<span class="mz-pipe">|</span>DocAssist
   ====================================================================== */
.mz-pipe { color: var(--mz-rot); padding: 0 .28em; font-weight: inherit; }

.uk-light .mz-pipe,
.uk-section-secondary:not(.uk-preserve-color) .mz-pipe,
.uk-tile-secondary:not(.uk-preserve-color) .mz-pipe,
.uk-card-secondary.uk-card-body .mz-pipe,
.uk-card-secondary > :not([class*="uk-card-media"]) .mz-pipe,
.uk-overlay-primary .mz-pipe,
.uk-offcanvas-bar .mz-pipe { color: inherit; }

/* ======================================================================
   5 · Statement – ein einzelner Satz sehr groß
   Headline-Element › Class: mz-statement  (optional + mz-statement--center)
   Kernaussage markieren: <span class="mz-mark">…</span>
   Betonung nur über den Schnitt (seit 0.3.2): Enthält das Statement eine mz-mark,
   steht der Rest in Light und die Kernaussage in Black – keine rote Unterstreichung.
   Optional ein kurzer roter Strich darüber: zusätzlich Klasse mz-accent.
   ====================================================================== */
.mz-statement.mz-statement {
  font-weight: 900;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  max-width: 18ch;
  margin-top: 0;
  text-wrap: balance;
}
.mz-statement--center.mz-statement--center { margin-left: auto; margin-right: auto; text-align: center; }
.mz-statement--wide.mz-statement--wide { max-width: 24ch; }
.mz-statement.mz-statement:has(.mz-mark) { font-weight: 300; }
.mz-mark, .mz-statement.mz-statement .mz-mark { font-weight: 900; box-shadow: none; }

/* Haltungssatz / großes Zitat (Text-Element mit <blockquote> oder Absatz) */
.mz-quote.mz-quote {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
  line-height: 1.2;
  font-weight: 900;
  border-left: 5px solid var(--mz-rot);
  padding-left: 28px;
  margin: 0;
}
.mz-quote.mz-quote blockquote, .mz-quote.mz-quote p { font: inherit; margin: 0; padding: 0; border: 0; color: inherit; }
.mz-quote.mz-quote footer, .mz-quote.mz-quote cite {
  display: block; margin-top: 16px;
  font-size: 16px; font-weight: 400; font-style: normal; color: var(--mz-grau-dunkel);
}

.uk-light .mz-quote.mz-quote footer,
.uk-section-secondary:not(.uk-preserve-color) .mz-quote.mz-quote footer,
.uk-tile-secondary:not(.uk-preserve-color) .mz-quote.mz-quote footer,
.uk-card-secondary.uk-card-body .mz-quote.mz-quote footer,
.uk-card-secondary > :not([class*="uk-card-media"]) .mz-quote.mz-quote footer,
.uk-overlay-primary .mz-quote.mz-quote footer,
.uk-offcanvas-bar .mz-quote.mz-quote footer,
.uk-light .mz-quote.mz-quote cite,
.uk-section-secondary:not(.uk-preserve-color) .mz-quote.mz-quote cite,
.uk-tile-secondary:not(.uk-preserve-color) .mz-quote.mz-quote cite,
.uk-card-secondary.uk-card-body .mz-quote.mz-quote cite,
.uk-card-secondary > :not([class*="uk-card-media"]) .mz-quote.mz-quote cite,
.uk-overlay-primary .mz-quote.mz-quote cite,
.uk-offcanvas-bar .mz-quote.mz-quote cite { color: var(--mz-blau-hell); }

/* ======================================================================
   6 · Ohne / Mit – Gegenüberstellung
   Table-Element (Spalten: Kriterium | ohne | mit) › Class: mz-compare
   oder eine eigene <table> innerhalb eines Elements mit Class mz-compare.
   Spaltenköpfe kommen aus dem Tabellenkopf; mobil werden Paare gestapelt,
   die Beschriftung ist per CSS-Variable änderbar.
   ====================================================================== */
.mz-compare {
  --mz-compare-ohne: "Ohne";
  --mz-compare-mit: "Mit";
}
.mz-compare table, table.mz-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
}
.mz-compare.mz-compare th,
.mz-compare.mz-compare td {
  padding: 16px 20px;
  vertical-align: top;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--mz-grau-hell);
  font-size: 17px;
  line-height: 1.5;
}
.mz-compare.mz-compare th {
  font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mz-grau-dunkel);
  border-bottom: 2px solid var(--mz-text);
}
.mz-compare.mz-compare td:first-child { font-weight: 700; color: var(--mz-text); width: 26%; }
/* ohne */
.mz-compare.mz-compare td:nth-child(2) { color: var(--mz-grau-dunkel); position: relative; padding-left: 44px; }
.mz-compare.mz-compare td:nth-child(2)::after {
  content: ""; position: absolute; left: 20px; top: calc(16px + .75em);
  width: 12px; height: 2px; background: var(--mz-grau-mittel);
}
/* mit */
.mz-compare.mz-compare th:nth-child(3) { color: var(--mz-blau); }
.mz-compare.mz-compare td:nth-child(3) {
  background: var(--mz-blau-licht);
  color: var(--mz-text);
  position: relative; padding-left: 48px;
  border-bottom-color: #fff;
}
.mz-compare.mz-compare td:nth-child(3)::after {
  content: ""; position: absolute; left: 20px; top: calc(16px + .75em - 8px);
  width: 16px; height: 16px;
  background: var(--mz-rot);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mz-compare.mz-compare td > :last-child { margin-bottom: 0; }

@media (max-width: 959px) {
  .mz-compare.mz-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mz-compare.mz-compare table, .mz-compare.mz-compare tbody,
  .mz-compare.mz-compare tr, .mz-compare.mz-compare td { display: block; width: auto; }
  .mz-compare.mz-compare tr { margin-bottom: 20px; border-top: 2px solid var(--mz-text); }
  .mz-compare.mz-compare td { border-bottom: 0; }
  .mz-compare.mz-compare td:first-child { width: auto; padding-left: 0; padding-right: 0; }
  .mz-compare.mz-compare td:nth-child(2)::before,
  .mz-compare.mz-compare td:nth-child(3)::before {
    display: block; margin-bottom: 4px;
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  }
  .mz-compare.mz-compare td:nth-child(2)::before { content: var(--mz-compare-ohne); color: var(--mz-grau-dunkel); }
  .mz-compare.mz-compare td:nth-child(3)::before { content: var(--mz-compare-mit); color: var(--mz-blau); }
  .mz-compare.mz-compare td:nth-child(2) { background: var(--mz-grau-licht); }
  .mz-compare.mz-compare td:nth-child(2)::after { top: calc(16px + 1.4em + .75em); }
  .mz-compare.mz-compare td:nth-child(3)::after { top: calc(16px + 1.4em + .75em - 8px); }
}

/* ======================================================================
   7 · Kontur-Ziffern
   a) Einzelne Ziffer: Text/Headline mit Class mz-outline-num
   b) Automatisch nummerierte Schrittfolge: Grid-Element › Class mz-count
      (jeder Eintrag .el-item erhält 01, 02, 03 …)
   ====================================================================== */
.mz-outline-num.mz-outline-num,
.mz-count .el-item::before {
  font-weight: 900;
  font-size: clamp(4rem, 3rem + 3vw, 6.5rem);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 2px var(--mz-blau-hell);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.mz-outline-num.mz-outline-num { margin: 0 0 12px; }
.mz-count { counter-reset: mz-count; }
.mz-count .el-item { counter-increment: mz-count; }
.mz-count .el-item::before {
  content: counter(mz-count, decimal-leading-zero);
  display: block;
  margin-bottom: 16px;
}
.mz-outline-num--mittel.mz-outline-num--mittel,
.mz-count--mittel .el-item::before { -webkit-text-stroke-color: var(--mz-blau-mittel); }

.uk-light .mz-outline-num.mz-outline-num,
.uk-section-secondary:not(.uk-preserve-color) .mz-outline-num.mz-outline-num,
.uk-tile-secondary:not(.uk-preserve-color) .mz-outline-num.mz-outline-num,
.uk-card-secondary.uk-card-body .mz-outline-num.mz-outline-num,
.uk-card-secondary > :not([class*="uk-card-media"]) .mz-outline-num.mz-outline-num,
.uk-overlay-primary .mz-outline-num.mz-outline-num,
.uk-offcanvas-bar .mz-outline-num.mz-outline-num,
.uk-light .mz-count .el-item::before,
.uk-section-secondary:not(.uk-preserve-color) .mz-count .el-item::before,
.uk-tile-secondary:not(.uk-preserve-color) .mz-count .el-item::before,
.uk-card-secondary.uk-card-body .mz-count .el-item::before,
.uk-card-secondary > :not([class*="uk-card-media"]) .mz-count .el-item::before,
.uk-overlay-primary .mz-count .el-item::before,
.uk-offcanvas-bar .mz-count .el-item::before { -webkit-text-stroke-color: var(--mz-blau-mittel); }
@supports not (-webkit-text-stroke: 1px black) {
  .mz-outline-num.mz-outline-num, .mz-count .el-item::before { color: var(--mz-blau-hell); }
}

/* ======================================================================
   8 · Icon-Farben
   Am Element (Grid, Icon, Liste, Image mit Inline-SVG …) › Class mz-icons
   Blau auf hell, Weiß auf dunkel, Rot nur aktiv (mz-icons--aktiv).
   ====================================================================== */
.mz-icons .uk-icon, .mz-icons [uk-icon], .mz-icons svg, .mz-icons .el-image[uk-svg] { color: var(--mz-blau); }

.uk-light .mz-icons .uk-icon,
.uk-section-secondary:not(.uk-preserve-color) .mz-icons .uk-icon,
.uk-tile-secondary:not(.uk-preserve-color) .mz-icons .uk-icon,
.uk-card-secondary.uk-card-body .mz-icons .uk-icon,
.uk-card-secondary > :not([class*="uk-card-media"]) .mz-icons .uk-icon,
.uk-overlay-primary .mz-icons .uk-icon,
.uk-offcanvas-bar .mz-icons .uk-icon,
.uk-light .mz-icons [uk-icon],
.uk-section-secondary:not(.uk-preserve-color) .mz-icons [uk-icon],
.uk-tile-secondary:not(.uk-preserve-color) .mz-icons [uk-icon],
.uk-card-secondary.uk-card-body .mz-icons [uk-icon],
.uk-card-secondary > :not([class*="uk-card-media"]) .mz-icons [uk-icon],
.uk-overlay-primary .mz-icons [uk-icon],
.uk-offcanvas-bar .mz-icons [uk-icon],
.uk-light .mz-icons svg,
.uk-section-secondary:not(.uk-preserve-color) .mz-icons svg,
.uk-tile-secondary:not(.uk-preserve-color) .mz-icons svg,
.uk-card-secondary.uk-card-body .mz-icons svg,
.uk-card-secondary > :not([class*="uk-card-media"]) .mz-icons svg,
.uk-overlay-primary .mz-icons svg,
.uk-offcanvas-bar .mz-icons svg { color: #fff; }
.mz-icons--aktiv .uk-icon, .mz-icons--aktiv svg,
.mz-icons .uk-active .uk-icon, .mz-icons .uk-active svg { color: var(--mz-rot); }

/* ======================================================================
   9 · Marker-Liste und Faktenleiste (Nachfolger von .maerz-list/.marker-square)
   Klasse am Text-Element ODER direkt am <ul> (Quelltext-Ansicht des Editors)
   ====================================================================== */
.mz-list.mz-list ul,
ul.mz-list.mz-list { list-style: none; margin: 0; padding: 0; }
.mz-list.mz-list li { position: relative; padding-left: 22px; margin: 0 0 10px; }
.mz-list.mz-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--mz-rot); border-radius: 1.5px;
}
.mz-facts.mz-facts ul,
ul.mz-facts.mz-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 36px; }
.mz-facts.mz-facts li { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; }
.mz-facts.mz-facts li::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 3px; background: var(--mz-rot);
}

/* ======================================================================
   10 · Flächen und Hero
   Sektion › Class:
     mz-tief      Blau tief (#263947), z. B. Compliance-Band
     mz-schimmer  roter Lichtschimmer oben rechts auf dunkler Sektion
     mz-lichtblau Lichtblau-Fläche (falls die Stil-Einstellung „Primary“ anders belegt ist)
     mz-hero      Standard-Hero: Blau-Verlauf + Schimmer, optional Bild über
                  style="--mz-hero-image:url(…)" bzw. Sektionsbild + diese Klasse
   Bei dunklen Flächen in der Sektion „Text Color: Light“ wählen.
   ====================================================================== */
.mz-tief.mz-tief { background-color: var(--mz-blau-tief); }
.mz-lichtblau.mz-lichtblau { background-color: var(--mz-blau-licht); }
.mz-schimmer.mz-schimmer,
.mz-hero.mz-hero { position: relative; isolation: isolate; }
.mz-schimmer.mz-schimmer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 88% 8%, rgba(193, 0, 31, .22), transparent 62%);
}
.mz-hero.mz-hero {
  --mz-hero-image: none;
  background-color: var(--mz-blau-tief);
  background-image:
    radial-gradient(ellipse 50% 48% at 85% 10%, rgba(193, 0, 31, .24), transparent 62%),
    linear-gradient(135deg, rgba(38, 57, 71, .97) 0%, rgba(49, 71, 89, .86) 45%, rgba(49, 71, 89, .72) 100%),
    var(--mz-hero-image);
  background-size: cover;
  background-position: center;
}

/* ======================================================================
   11 · Callout und Karten-Akzent
   ====================================================================== */
.mz-callout.mz-callout {
  border-left: 4px solid var(--mz-rot);
  background: var(--mz-blau-licht);
  padding: 22px 26px;
  font-size: 1.1em;
  line-height: 1.5;
}
.mz-callout.mz-callout > :last-child { margin-bottom: 0; }

.uk-light .mz-callout.mz-callout,
.uk-section-secondary:not(.uk-preserve-color) .mz-callout.mz-callout,
.uk-tile-secondary:not(.uk-preserve-color) .mz-callout.mz-callout,
.uk-card-secondary.uk-card-body .mz-callout.mz-callout,
.uk-card-secondary > :not([class*="uk-card-media"]) .mz-callout.mz-callout,
.uk-overlay-primary .mz-callout.mz-callout,
.uk-offcanvas-bar .mz-callout.mz-callout { background: rgba(255, 255, 255, .07); }
/* Einzelne Karte hervorheben (nicht für alle Karten – Rot bleibt Signal) */
.uk-card.mz-card-accent,
.mz-card-accent > .uk-card { border-top: 3px solid var(--mz-rot); }

/* ======================================================================
   12 · Bildplatzhalter (bis echte Motive vorliegen)
   Text-Element › Class mz-placeholder, Inhalt: Motiv · Format · Bearbeitung
   ====================================================================== */
.mz-placeholder.mz-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: var(--mz-ratio, 4 / 5);
  padding: 24px;
  background: repeating-linear-gradient(135deg, var(--mz-blau-licht) 0 14px, #e3e7ee 14px 28px);
  border: 1px dashed var(--mz-blau-mittel);
  color: var(--mz-blau);
  font-size: 15px; line-height: 1.45;
}
.mz-placeholder--16x9.mz-placeholder--16x9 { --mz-ratio: 16 / 9; }
.mz-placeholder--1x1.mz-placeholder--1x1 { --mz-ratio: 1 / 1; }

/* ======================================================================
   13 · KI-Badge (seit 0.4.0; ab 0.4.3 rund wie auf dev)
   Runder Button „KI“, Weiß 29 % deckend, Schrift ausgestanzt (Bild scheint durch) – Größe,
   Transparenz und Schrift wie das bisherige Badge auf dev. Überfahren, Fokussieren oder
   Antippen: wird zur Pille „KI-generiert“. Text für Screenreader enthalten.
   - Im Element „märz Hero“: Häkchen „KI-Badge“.
   - An Bildern: Image-Element › Advanced › Class  mz-ai-badge  (Badge unten links)
       Position: zusätzlich mz-ai-badge--tl / --tr / --br
   - An Grid/Karten mit Bildern: Klasse am Grid  mz-ai-badge mz-ai-badge--media
       (Badge an jedem Bild der Einträge). Das Badge setzt maerz-elements.js ein.
   ====================================================================== */
:root {
  --mz-ai-size: clamp(44px, 4vw, 50px);
  --mz-ai-inset: 16px;
  --mz-ai-mask-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cmask id='m'%3E%3Crect width='50' height='50' fill='%23fff'/%3E%3Ctext x='25' y='34.3' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='26' fill='%23000'%3EKI%3C/text%3E%3C/mask%3E%3Ccircle cx='25' cy='25' r='25' fill='%23000' mask='url(%23m)'/%3E%3C/svg%3E");
  --mz-ai-mask-pill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 50'%3E%3Cmask id='m'%3E%3Crect width='132' height='50' fill='%23fff'/%3E%3Ctext x='66' y='31.1' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-weight='700' font-size='17' textLength='96' lengthAdjust='spacingAndGlyphs' fill='%23000'%3EKI-generiert%3C/text%3E%3C/mask%3E%3Crect width='132' height='50' rx='25' fill='%23000' mask='url(%23m)'/%3E%3C/svg%3E");
}
.mz-ai {
  position: relative; display: inline-block; flex: none; vertical-align: middle;
  width: var(--mz-ai-size); height: var(--mz-ai-size);
  background: rgba(255, 255, 255, .29);
  -webkit-mask: var(--mz-ai-mask-dot) left center / auto 100% no-repeat;
          mask: var(--mz-ai-mask-dot) left center / auto 100% no-repeat;
  font-size: 0; line-height: 0; color: transparent; overflow: hidden; cursor: default;
  transition: width .2s ease, background-color .2s ease;
}
.mz-ai > b, .mz-ai .mz-ai__more { display: none; }
.mz-ai:hover, .mz-ai:focus, .mz-ai.is-open {
  width: calc(var(--mz-ai-size) * 2.64);
  background: rgba(255, 255, 255, .42);
  -webkit-mask-image: var(--mz-ai-mask-pill);
          mask-image: var(--mz-ai-mask-pill);
}
.mz-ai:focus { outline: none; }
.mz-ai:focus-visible { background: rgba(255, 255, 255, .6); }
.mz-sr, .mz-ai .mz-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mz-ai-host { position: relative; }
.mz-ai-host > .mz-ai { position: absolute; left: var(--mz-ai-inset); bottom: var(--mz-ai-inset); z-index: 2; }
.mz-ai-badge--tl .mz-ai-host > .mz-ai, .mz-ai-host.mz-ai-badge--tl > .mz-ai { top: var(--mz-ai-inset); bottom: auto; }
.mz-ai-badge--tr .mz-ai-host > .mz-ai, .mz-ai-host.mz-ai-badge--tr > .mz-ai { top: var(--mz-ai-inset); bottom: auto; left: auto; right: var(--mz-ai-inset); }
.mz-ai-badge--br .mz-ai-host > .mz-ai, .mz-ai-host.mz-ai-badge--br > .mz-ai { left: auto; right: var(--mz-ai-inset); }
/* rechts verankert: Pille wächst nach links */
.mz-ai-badge--tr .mz-ai-host > .mz-ai, .mz-ai-host.mz-ai-badge--tr > .mz-ai,
.mz-ai-badge--br .mz-ai-host > .mz-ai, .mz-ai-host.mz-ai-badge--br > .mz-ai { -webkit-mask-position: right center; mask-position: right center; }

/* ======================================================================
   14 · Ablauf-Linie  mz-steps (seit 0.4.0)
   Grid-Element › Advanced › Class: mz-steps (YOOtheme setzt sie an eine Hülle um das .uk-grid)
   Einträge mit Titel und Text, Spalten z. B. 1 / 4@m. Nummern zählt das CSS (1, 2, 3 …).
   Desktop: Punkte auf einer Linie. Unter 960 px senkrecht, Punkt links.
   Lücke anders als „Default“? Dann zusätzlich mz-steps--small / --medium / --large.
   ====================================================================== */
/* Lücke wie UIkit-Grid: Standard 30 px, ab 1200 px 40 px */
.mz-steps { --mz-steps-gap: 30px; --mz-dot: 44px; counter-reset: mz-step; }
.mz-steps--small { --mz-steps-gap: 15px; }
.mz-steps--medium { --mz-steps-gap: 30px; }
.mz-steps--large { --mz-steps-gap: 40px; }
@media (min-width: 1200px) {
  .mz-steps { --mz-steps-gap: 40px; }
  .mz-steps--small { --mz-steps-gap: 15px; }
  .mz-steps--medium { --mz-steps-gap: 30px; }
  .mz-steps--large { --mz-steps-gap: 70px; }
}
.mz-steps .el-item { position: relative; counter-increment: mz-step; padding-top: calc(var(--mz-dot) + 22px); }
.mz-steps .el-item::before {
  content: counter(mz-step);
  position: absolute; left: 0; top: 0; z-index: 1;
  display: grid; place-items: center;
  width: var(--mz-dot); height: var(--mz-dot); box-sizing: border-box; border-radius: 50%;
  background: #fff; border: 2px solid var(--mz-blau); color: var(--mz-blau);
  font-size: 17px; font-weight: 700; line-height: 1;
  transition: background-color .2s, color .2s, border-color .2s;
}
.mz-steps .el-item:hover::before { background: var(--mz-rot); border-color: var(--mz-rot); color: #fff; }
.mz-steps .uk-grid > :not(:last-child) > .el-item::after,
.mz-steps.uk-grid > :not(:last-child) > .el-item::after {
  content: ""; position: absolute; top: calc(var(--mz-dot) / 2 - 1px); height: 2px;
  left: var(--mz-dot); right: calc(-1 * var(--mz-steps-gap));
  background: var(--mz-blau-hell);
}
.mz-steps .el-title { margin-top: 0; }
@media (max-width: 959px) {
  .mz-steps .el-item { padding: 0 0 0 calc(var(--mz-dot) + 18px); min-height: var(--mz-dot); }
  .mz-steps .el-title { padding-top: 9px; }
  .mz-steps .uk-grid > :not(:last-child) > .el-item::after,
.mz-steps.uk-grid > :not(:last-child) > .el-item::after {
    left: calc(var(--mz-dot) / 2 - 1px); right: auto; width: 2px; height: auto;
    top: var(--mz-dot); bottom: calc(-1 * var(--mz-steps-gap));
  }
}

/* ======================================================================
   15 · Bildband  mz-band (seit 0.4.0)
   Sektion mit Hintergrundbild › Advanced › Class: mz-band, Text Color: Light.
   Verlauf links dicht wie im Hero (Text links), am Handy von unten.
   ====================================================================== */
.mz-band.mz-band { position: relative; isolation: isolate; background-color: var(--mz-blau-tief); }
.mz-band.mz-band > [class*="uk-background-"] { position: relative; isolation: isolate; }
.mz-band.mz-band:not(:has(> [class*="uk-background-"]))::before,
.mz-band.mz-band > [class*="uk-background-"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(28, 42, 53, .97) 0%, rgba(38, 57, 71, .9) 45%, rgba(49, 71, 89, .55) 75%, rgba(58, 84, 104, .35) 100%);
}
@media (max-width: 959px) {
  .mz-band.mz-band:not(:has(> [class*="uk-background-"]))::before,
  .mz-band.mz-band > [class*="uk-background-"]::before {
    background: linear-gradient(0deg, rgba(28, 42, 53, .97) 0%, rgba(38, 57, 71, .9) 60%, rgba(49, 71, 89, .7) 100%);
  }
}

/* ======================================================================
   16 · Kacheln mit Linien  mz-tiles (seit 0.4.0)
   Grid-Element › Class: mz-tiles (gern mit mz-icons), Grid › Gap: Collapse, Match Height an.
   Eine ungerade letzte Kachel geht am Handy über beide Spalten.
   ====================================================================== */
.mz-tiles.mz-tiles { border-top: 1px solid var(--mz-grau-hell); border-left: 1px solid var(--mz-grau-hell); }
.mz-tiles .uk-grid > *, .mz-tiles.uk-grid > * { display: flex; }
.mz-tiles .el-item { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 28px 24px 30px; border-right: 1px solid var(--mz-grau-hell); border-bottom: 1px solid var(--mz-grau-hell); }
.mz-tiles .el-item > * { margin: 0; }
/* Lange Wörter (z. B. „Versicherungsgesellschaften“) trennen statt überlaufen – braucht lang="de" am <html>, setzt Joomla */
.mz-tiles .el-title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.mz-tiles .el-image, .mz-tiles .el-item svg { width: 38px; height: 38px; color: var(--mz-blau); }
@media (max-width: 959px) {
  .mz-tiles .el-item { padding: 20px 16px 22px; gap: 12px; }
  .mz-tiles .el-image, .mz-tiles .el-item svg { width: 32px; height: 32px; }
  .mz-tiles .uk-grid > :last-child:nth-child(odd), .mz-tiles.uk-grid > :last-child:nth-child(odd) { width: 100%; }
}

/* ======================================================================
   17 · Liste mit Trennlinien  mz-lines (seit 0.4.0)
   List-Element oder Text-Element (bzw. direkt am <ul>) › Class: mz-lines
   ====================================================================== */
.mz-lines.mz-lines ul, ul.mz-lines.mz-lines { list-style: none; margin: 0; padding: 0; }
.mz-lines.mz-lines ul > li, ul.mz-lines.mz-lines > li { margin: 0; padding: 8px 0; border-top: 1px solid var(--mz-grau-licht); }
.mz-lines.mz-lines ul > li:first-child, ul.mz-lines.mz-lines > li:first-child { border-top-color: var(--mz-grau-hell); }
.mz-lines.mz-lines li::before { display: none; }

/* ======================================================================
   18 · Merksatz  mz-merksatz (seit 0.4.0)
   Text-Element › Class: mz-merksatz – roter Strich links, fett.
   ====================================================================== */
.mz-merksatz.mz-merksatz { padding-left: 22px; border-left: 3px solid var(--mz-rot); font-size: 19px; line-height: 1.5; font-weight: 700; }
.mz-merksatz.mz-merksatz > :last-child { margin-bottom: 0; }
@media (max-width: 959px) { .mz-merksatz.mz-merksatz { padding-left: 18px; font-size: 17px; } }
/* Große Variante für kurze Thesen (seit 0.7.2): Text-Element › Class: mz-merksatz mz-merksatz--large */
.mz-merksatz.mz-merksatz--large { border-left-width: 5px; font-size: clamp(22px, 15px + .9vw, 26px); line-height: 1.3; font-weight: 900; }
@media (max-width: 959px) { .mz-merksatz.mz-merksatz--large { font-size: 20px; } }

/* ======================================================================
   19 · Hinweis-Kasten  mz-hinweis (seit 0.4.0)
   Text-Element › Class: mz-hinweis, z. B. Helpdesk-Hinweis am Kontaktformular.
   Fettes Wort am Anfang = Einstieg. Links in einem eigenen Absatz nebeneinander:
   Absatz mit Klasse mz-hinweis__links; SOS-Marke: Link mit Klasse mz-sos.
   Funktioniert auf hellen und dunklen Sektionen.
   ====================================================================== */
.mz-hinweis.mz-hinweis { padding: 22px 24px; border: 1px solid var(--mz-grau-hell); border-left: 3px solid var(--mz-blau); }
.mz-hinweis.mz-hinweis p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--mz-grau-dunkel); }
.mz-hinweis.mz-hinweis p + p { margin-top: 12px; }
.mz-hinweis.mz-hinweis b, .mz-hinweis.mz-hinweis strong { color: var(--mz-text); }
.mz-hinweis .mz-hinweis__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.mz-hinweis.mz-hinweis a { color: var(--mz-blau); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.mz-hinweis.mz-hinweis a:hover { color: var(--mz-rot); }
.mz-sos::before { content: "SOS"; }
.uk-light .mz-hinweis.mz-hinweis,
.uk-section-secondary:not(.uk-preserve-color) .mz-hinweis.mz-hinweis,
.uk-tile-secondary:not(.uk-preserve-color) .mz-hinweis.mz-hinweis { border-color: rgba(255, 255, 255, .22); border-left-color: var(--mz-blau-hell); }
.uk-light .mz-hinweis.mz-hinweis p,
.uk-section-secondary:not(.uk-preserve-color) .mz-hinweis.mz-hinweis p,
.uk-tile-secondary:not(.uk-preserve-color) .mz-hinweis.mz-hinweis p { color: var(--mz-blau-licht); }
.uk-light .mz-hinweis.mz-hinweis b, .uk-light .mz-hinweis.mz-hinweis strong, .uk-light .mz-hinweis.mz-hinweis a,
.uk-section-secondary:not(.uk-preserve-color) .mz-hinweis.mz-hinweis :is(b, strong, a),
.uk-tile-secondary:not(.uk-preserve-color) .mz-hinweis.mz-hinweis :is(b, strong, a) { color: #fff; }
.uk-light .mz-hinweis.mz-hinweis a:hover,
.uk-section-secondary:not(.uk-preserve-color) .mz-hinweis.mz-hinweis a:hover { color: var(--mz-blau-licht); }
@media (max-width: 959px) { .mz-hinweis.mz-hinweis { padding: 18px; } }

/* ======================================================================
   20 · Meta-Label und Unterzeile (seit 0.5.0)
   Im Text/HTML:  <p class="mz-meta">Core</p>   kleine Versalien Blau
                  <p class="mz-sub">…</p>        fette Unterzeile unter einem Titel
   Im Grid wird das Feld „Meta“ (.el-meta) in mz-layers / mz-proofs automatisch so gesetzt.
   ====================================================================== */
.mz-meta.mz-meta,
.mz-layers .el-meta {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.3; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mz-blau);
}
.mz-sub.mz-sub { margin: 0 0 14px; font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--mz-text); }

/* ======================================================================
   21 · Schichten  mz-layers (seit 0.5.0)
   Grid-Element › Class: mz-layers. Spalten z. B. 1 / 3@m, Lücke Standard.
   Einträge: Meta (z. B. „Core“), Titel h3, Inhalt (erster Absatz class="mz-sub", Text, Liste mz-list).
   Karten Lichtgrau mit blauer Oberkante; eine durchgehende Linie mit Punkten verbindet die Karten.
   ====================================================================== */
.mz-layers { --mz-layers-gap: 30px; }
@media (min-width: 1200px) { .mz-layers { --mz-layers-gap: 40px; } }
.mz-layers .el-item {
  position: relative; height: 100%; box-sizing: border-box;
  background: var(--mz-grau-licht); border-top: 3px solid var(--mz-blau);
  padding: 32px 30px 34px;
}
.mz-layers .el-item::before {
  content: ""; position: absolute; left: 30px; top: -11px; width: 16px; height: 16px; box-sizing: border-box;
  border-radius: 50%; background: #fff; border: 3px solid var(--mz-blau);
}
.mz-layers .uk-grid > :not(:last-child) > .el-item::after,
.mz-layers.uk-grid > :not(:last-child) > .el-item::after {
  content: ""; position: absolute; top: -3px; left: 100%; width: var(--mz-layers-gap); height: 3px; background: var(--mz-blau);
}
.mz-layers .el-title { margin-top: 0; }
.mz-layers .el-content > :last-child { margin-bottom: 0; }
.mz-layers ul.mz-list.mz-list, .mz-layers .mz-list.mz-list ul { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mz-grau-hell); }
@media (max-width: 959px) {
  .mz-layers .el-item { padding: 30px 20px 26px; }
  .mz-layers .el-item::before { left: 20px; }
  .mz-layers .uk-grid > * > .el-item::after, .mz-layers.uk-grid > * > .el-item::after { display: none; }
}

/* ======================================================================
   22 · Paar im Reiter  mz-pair (seit 0.5.0)
   Switcher-Inhalt (Quelltext): <div class="mz-pair"><div> … </div><div> … </div></div>
   Zwei Karten nebeneinander mit Trennlinie, am Handy untereinander.
   ====================================================================== */
.mz-pair.mz-pair { display: grid; grid-template-columns: 1fr 1fr; margin: -24px; }
.mz-pair > * { padding: 36px 36px 38px; }
.mz-pair > * + * { border-left: 1px solid var(--mz-grau-hell); }
.mz-pair h3 { margin-top: 0; }
.mz-pair ul.mz-list.mz-list, .mz-pair .mz-list.mz-list ul { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mz-grau-hell); }
.mz-pair > * > :last-child { margin-bottom: 0; }
@media (max-width: 959px) {
  .mz-pair.mz-pair { grid-template-columns: 1fr; }
  .mz-pair > * { padding: 26px 20px 28px; }
  .mz-pair > * + * { border-left: 0; border-top: 1px solid var(--mz-grau-hell); }
}

/* ======================================================================
   23 · Kontur-Ziffern seitlich  mz-count--side (seit 0.5.0)
   Grid-Element (1 Spalte) › Class: mz-count mz-count--side
   Ziffer links, Text rechts, Linien zwischen den Einträgen.
   ====================================================================== */
.mz-count--side .el-item {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 20px; align-items: start;
  padding: 28px 0; border-top: 1px solid var(--mz-grau-hell);
}
.mz-count--side .uk-grid > :last-child > .el-item, .mz-count--side.uk-grid > :last-child > .el-item { border-bottom: 1px solid var(--mz-grau-hell); }
.mz-count--side .el-item::before {
  grid-column: 1; grid-row: 1 / span 9; margin: 0;
  font-size: 64px; line-height: .85; -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: var(--mz-blau-mittel);
  transition: -webkit-text-stroke-color .2s ease;
}
.mz-count--side .el-item:hover::before { -webkit-text-stroke-color: var(--mz-rot); }
.mz-count--side .el-item > * { grid-column: 2; margin-top: 0; }
.mz-count--side .el-item > :last-child { margin-bottom: 0; }
@media (max-width: 959px) {
  .mz-count--side .el-item { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; padding: 22px 0; }
  .mz-count--side .el-item::before { font-size: 44px; }
}

/* ======================================================================
   24 · Belege / Kacheln  mz-proofs (seit 0.5.0)
   Grid-Element › Class: mz-proofs (gern mit mz-icons). Spalten 1 / 3@m.
   Kacheln Lichtblau mit blauer Oberkante, Icon 40 px.
   ====================================================================== */
.mz-proofs .el-item {
  height: 100%; box-sizing: border-box; padding: 34px 30px 36px;
  background: var(--mz-blau-licht); border-top: 3px solid var(--mz-blau);
}
.mz-proofs .el-image, .mz-proofs .el-item > .uk-icon, .mz-proofs .el-item svg { width: 40px; height: 40px; color: var(--mz-blau); }
.mz-proofs .el-title { margin-top: 18px; }
.mz-proofs .el-content > :last-child { margin-bottom: 0; }
@media (max-width: 959px) { .mz-proofs .el-item { padding: 26px 20px 28px; } }

/* ======================================================================
   25 · Reiter über volle Breite  mz-tabs-full (seit 0.5.1)
   Switcher-Element › Advanced › Class: mz-tabs-full
   Reiter teilen sich die Zeile zu gleichen Teilen; unter 960 px untereinander.
   ====================================================================== */
.mz-tabs-full .uk-tab { flex-wrap: nowrap; }
.mz-tabs-full .uk-tab > * { flex: 1 1 0; min-width: 0; }
.mz-tabs-full .uk-tab > * > a { justify-content: center; text-align: center; height: 100%; box-sizing: border-box; }
@media (max-width: 959px) {
  .mz-tabs-full .uk-tab { flex-direction: column; }
  .mz-tabs-full .uk-tab > * > a { justify-content: flex-start; text-align: left; }
}

/* ======================================================================
   26 · Karten ohne Verbindungslinie  mz-layers--flat (seit 0.6.0)
   Grid-Element › Class: mz-layers mz-layers--flat
   Karten wie mz-layers, aber ohne Punkte und Linie – für Leistungsgruppen
   ohne Reihenfolge (z. B. Cabling). Auf Muted-Sektionen weiße Karten.
   ====================================================================== */
.mz-layers--flat .el-item::before,
.mz-layers--flat .uk-grid > * > .el-item::after,
.mz-layers--flat.uk-grid > * > .el-item::after { display: none; }
.mz-layers.mz-layers--flat .el-item { padding-top: 30px; }
.uk-section-muted .mz-layers .el-item { background: #fff; }

/* ======================================================================
   27 · Gruppenüberschrift mit Linie  mz-grp (seit 0.6.0)
   Text-Element › Class: mz-grp   (Inhalt: z. B. „Neu verlegen“)
   Rote Versalien, dünne Linie bis zum rechten Rand.
   ====================================================================== */
.mz-grp.mz-grp { display: flex; align-items: center; gap: 18px; font-size: 15px; line-height: 1.3; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mz-rot); }
.mz-grp.mz-grp::after { content: ""; flex: 1; height: 1px; background: var(--mz-grau-hell); }
.mz-grp > * { margin: 0; }

/* ======================================================================
   28 · Schichtgrafik  mz-schema (seit 0.6.0)
   HTML-Element (Quelltext):
   <ol class="mz-schema">
     <li><p class="mz-schema__lvl">Anwendungen<b>Titel</b></p><ul class="mz-schema__tags"><li>…</li></ul></li>
     <li class="mz-schema__link" aria-hidden="true">benötigen</li>
     <li class="mz-schema__base"> … </li>       Schicht mit blauer Kante
     <li class="mz-schema__link" aria-hidden="true">umgesetzt durch</li>
     <li class="mz-schema__maerz"> … </li>      märz-Schicht, Blau mit roter Kante
   </ol>
   ====================================================================== */
.mz-schema.mz-schema { list-style: none; margin: 0; padding: 0; }
.mz-schema > li { margin: 0; }
.mz-schema > li:not(.mz-schema__link) {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 24px 28px; background: #fff; border-left: 4px solid var(--mz-blau-mittel);
}
.uk-section-default .mz-schema > li:not(.mz-schema__link) { background: var(--mz-grau-licht); }
.mz-schema > li.mz-schema__base { border-left-color: var(--mz-blau); }
.mz-schema > li.mz-schema__maerz { background: var(--mz-blau); color: #fff; border-left-color: var(--mz-rot); }
.mz-schema__lvl.mz-schema__lvl { margin: 0; font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mz-blau); }
.mz-schema__lvl b { display: block; margin-top: 6px; font-size: 22px; line-height: 1.15; font-weight: 900; letter-spacing: 0; text-transform: none; color: var(--mz-text); }
.mz-schema__maerz .mz-schema__lvl { color: var(--mz-blau-hell); }
.mz-schema__maerz .mz-schema__lvl b { color: #fff; }
.mz-schema__tags.mz-schema__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mz-schema__tags > li { margin: 0; padding: 6px 12px; background: var(--mz-grau-licht); font-size: 15px; line-height: 1.35; color: var(--mz-text); }
.uk-section-default .mz-schema__tags > li { background: #fff; }
.mz-schema__maerz .mz-schema__tags > li { background: rgba(255,255,255,.12); color: #fff; }
.mz-schema > li.mz-schema__link {
  display: flex; align-items: center; gap: 10px; padding: 10px 0 10px 28px;
  font-size: 13px; line-height: 1.3; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mz-grau-mittel);
}
.mz-schema > li.mz-schema__link::before { content: ""; width: 2px; height: 22px; background: var(--mz-blau-mittel); }
@media (max-width: 959px) {
  .mz-schema > li:not(.mz-schema__link) { grid-template-columns: 1fr; gap: 14px; padding: 20px 18px; }
  .mz-schema__lvl b { font-size: 20px; }
  .mz-schema > li.mz-schema__link { padding-left: 18px; }
}

/* ======================================================================
   29 · Leiste  mz-chips (seit 0.7.0)
   Text-Element (Quelltext): <ul class="mz-chips"><li>…</li>…</ul>
   Begriffe nebeneinander unter blauer Oberkante, Trennstriche; Handy 2 Spalten.
   ====================================================================== */
ul.mz-chips.mz-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 3px solid var(--mz-blau); }
.mz-chips.mz-chips > li { margin: 0; padding: 18px 18px 0 0; margin-right: 18px; border-right: 1px solid var(--mz-grau-hell); font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--mz-text); }
.mz-chips.mz-chips > li:last-child { border-right: 0; margin-right: 0; }
@media (max-width: 959px) {
  ul.mz-chips.mz-chips { grid-template-columns: 1fr 1fr; }
  .mz-chips.mz-chips > li { border-right: 0; margin-right: 0; padding: 14px 12px 0 0; }
}

/* ======================================================================
   30 · Reifegrad  mz-maturity (seit 0.7.0)
   HTML-Element (Quelltext), siehe Bauanleitung 09:
   <figure class="mz-maturity"><ol>
     <li data-st="Heute produktiv bei märz"><b>1 · Beobachten</b><span>…</span></li>
     <li class="is-next" data-st="Als Nächstes"> … </li>
     <li class="is-horizon" data-st="Horizont"> … </li>
   </ol><div class="mz-maturity__status" aria-hidden="true"><p>Heute …</p><p class="is-next">…</p><p class="is-horizon">…</p></div>
   <p class="mz-maturity__note">…</p></figure>
   Statusleiste: Spalten über --mz-mat-cols (Standard 3fr 1fr 1fr).
   ====================================================================== */
.mz-maturity.mz-maturity { margin: 0; padding: 36px 32px 28px; background: #fff; border-top: 3px solid var(--mz-blau); }
.uk-section-default .mz-maturity.mz-maturity { background: var(--mz-grau-licht); }
.mz-maturity ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.mz-maturity ol > li { position: relative; margin: 0; padding: 18px 16px; min-height: 110px; box-sizing: border-box; background: var(--mz-blau); color: #fff; }
.mz-maturity ol > li b { display: block; margin-bottom: 8px; font-size: 18px; line-height: 1.2; }
.mz-maturity ol > li span { display: block; font-size: 14.5px; line-height: 1.4; color: var(--mz-blau-licht); }
.mz-maturity ol > li.is-next { background: var(--mz-grau-mittel); }
.mz-maturity ol > li.is-horizon { background: transparent; color: var(--mz-blau); border: 2px dashed var(--mz-blau-mittel); }
.mz-maturity ol > li.is-horizon span { color: var(--mz-grau-dunkel); }
.mz-maturity ol > li:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 50%; width: 10px; height: 2px; background: var(--mz-blau-mittel); }
.mz-maturity__status { display: grid; grid-template-columns: var(--mz-mat-cols, 3fr 1fr 1fr); gap: 14px; margin-top: 14px; }
.mz-maturity__status p { margin: 0; padding-top: 10px; border-top: 3px solid var(--mz-rot); text-align: center; font-size: 12.5px; line-height: 1.3; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mz-rot); }
.mz-maturity__status p.is-next { border-color: var(--mz-grau-mittel); color: var(--mz-grau-mittel); }
.mz-maturity__status p.is-horizon { border-top-style: dashed; border-color: var(--mz-blau-mittel); color: var(--mz-blau-mittel); }
.mz-maturity__note.mz-maturity__note { margin: 22px 0 0; font-size: 15px; line-height: 1.55; color: var(--mz-grau-dunkel); }
.mz-maturity.mz-maturity { container-type: inline-size; }
.mz-maturity ol > li b { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 959px) { .mz-maturity.mz-maturity { padding: 24px 18px; } }
/* Stapeln nach Breite der Grafik selbst (seit 0.7.3) – auch wenn sie in einer schmalen Spalte steht */
@container (max-width: 759px) {
  .mz-maturity ol { grid-template-columns: 1fr; gap: 10px; }
  .mz-maturity ol > li { min-height: 0; }
  .mz-maturity ol > li::before { content: attr(data-st); display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
  .mz-maturity ol > li:not(:last-child)::after, .mz-maturity__status { display: none; }
}

/* ======================================================================
   31 · Agentenlandschaft  mz-agents (seit 0.7.0)
   HTML-Element (Quelltext) auf dunkler Sektion (Secondary), siehe Bauanleitung 09.
   .mz-agents__top > .mz-agent--human · .mz-agents__ctrl > 2× .mz-agent--ctrl
   .mz-agents__dom > .mz-agents__lbl + 3× .mz-agent--now + .mz-agents__lbl--p + 3× .mz-agent--part
   .mz-agents__foot
   ====================================================================== */
.mz-agents.mz-agents { margin: 0; padding: 32px; border: 1px solid rgba(255,255,255,.22); }
.mz-agent { padding: 14px 16px; text-align: center; font-size: 14px; line-height: 1.4; color: var(--mz-blau-licht); }
.mz-agent b { display: block; margin-bottom: 4px; font-size: 17px; color: #fff; }
.mz-agents__top { display: flex; justify-content: center; }
.mz-agent--human { min-width: 360px; background: #fff; border-left: 5px solid var(--mz-rot); color: var(--mz-grau-dunkel); }
.mz-agent--human b { color: var(--mz-text); }
.mz-agents__ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 720px; margin: 18px auto 0; }
.mz-agent--ctrl { background: rgba(255,255,255,.06); border: 2px solid var(--mz-rot); }
.mz-agents__dom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.mz-agents__lbl.mz-agents__lbl { grid-column: 1 / -1; margin: 14px 0 0; font-size: 12.5px; line-height: 1.3; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mz-blau-hell); }
.mz-agents__lbl--p.mz-agents__lbl--p { color: var(--mz-blau-mittel); }
.mz-agent--now { background: rgba(255,255,255,.12); border-top: 3px solid var(--mz-blau-hell); }
.mz-agent--part { border: 2px dashed rgba(255,255,255,.35); }
.mz-agents__foot.mz-agents__foot { margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--mz-blau-licht); }
@media (max-width: 959px) {
  .mz-agents.mz-agents { padding: 20px 16px; }
  .mz-agent--human { min-width: 0; width: 100%; }
  .mz-agents__ctrl, .mz-agents__dom { grid-template-columns: 1fr; gap: 10px; }
}

/* ======================================================================
   32 · Definition  mz-def (seit 0.7.0)
   Text-Element › Class: mz-def – Kasten mit roter Kante, Light-Schnitt; hell und dunkel.
   ====================================================================== */
.mz-def.mz-def { padding: 26px 30px; border-left: 5px solid var(--mz-rot); background: var(--mz-grau-licht); font-size: 21px; line-height: 1.55; font-weight: 300; }
.uk-section-secondary .mz-def.mz-def, .uk-light .mz-def.mz-def { background: rgba(255,255,255,.07); }
.mz-def.mz-def > :last-child { margin-bottom: 0; }
@media (max-width: 959px) { .mz-def.mz-def { padding: 20px 18px; font-size: 18px; } }

/* ======================================================================
   33 · Prinzipien  mz-prin (seit 0.7.0)
   Grid-Element › Class: mz-prin, Spalten 1 / 3@m, nur Titel + Inhalt.
   Linie oben, kurze rote Marke, Titel fett, Inhalt klein.
   ====================================================================== */
.mz-prin .el-item { padding: 22px 0; border-top: 1px solid var(--mz-grau-hell); }
.mz-prin .el-item::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 14px; background: var(--mz-rot); }
.mz-prin .el-title { margin: 0 0 6px; }
.mz-prin .el-content { margin-top: 0; color: var(--mz-grau-dunkel); }
.mz-prin .el-content > :last-child { margin-bottom: 0; }

/* ======================================================================
   34 · Zweispaltige Liste  mz-cols2 (seit 0.7.0)
   Am <ul> zusammen mit mz-list: <ul class="mz-list mz-cols2">; Handy einspaltig.
   ====================================================================== */
ul.mz-cols2.mz-cols2 { columns: 2; column-gap: 40px; }
.mz-cols2.mz-cols2 > li { break-inside: avoid; padding-top: 12px; padding-bottom: 12px; margin: 0; border-bottom: 1px solid var(--mz-grau-hell); }
/* Marker um den oberen Innenabstand versetzt, damit er auf der ersten Zeile sitzt (seit 0.13.2) */
.mz-list.mz-cols2.mz-cols2 > li::before, .mz-cols2.mz-cols2 > li::before { top: calc(12px + .62em); }
@media (max-width: 959px) { ul.mz-cols2.mz-cols2 { columns: 1; } }

/* ======================================================================
   35 · Bildunterschrift  mz-caption (seit 0.7.0)
   Text-Element › Class: mz-caption – klein, kursiv, Grau (dunkel: Lichtblau).
   ====================================================================== */
.mz-caption.mz-caption { font-size: 15.5px; line-height: 1.55; font-style: italic; color: var(--mz-grau-dunkel); }
.uk-section-secondary .mz-caption.mz-caption, .uk-light .mz-caption.mz-caption { color: var(--mz-blau-licht); }

/* ======================================================================
   36 · Kennzahlen  mz-stats (seit 0.8.0)
   Grid-Element › Class: mz-stats, Spalten 2 / 4@m, Gleiche Höhe, Panel-Stil keiner.
   Titel = Zahl (z. B. „Bis zu 8“), Inhalt = Erklärung. Kachel mit roter Oberkante.
   ====================================================================== */
.mz-stats .el-item { height: 100%; box-sizing: border-box; padding: 30px 26px 32px; background: #fff; border-top: 3px solid var(--mz-rot); }
.uk-section-default .mz-stats .el-item { background: var(--mz-grau-licht); }
.mz-stats .el-item { container-type: inline-size; }
.mz-stats .el-title.el-title { margin: 0 0 12px; font-size: clamp(26px, 17cqi, 52px); line-height: 1.05; font-weight: 900; color: var(--mz-blau); white-space: normal; overflow-wrap: break-word; }
.mz-stats .el-content { margin-top: 0; font-size: 16px; line-height: 1.5; color: var(--mz-grau-dunkel); }
.mz-stats .el-content > :last-child { margin-bottom: 0; }
@media (max-width: 959px) { .mz-stats .el-item { padding: 20px 16px; } .mz-stats .el-title.el-title { font-size: clamp(26px, 17cqi, 34px); } }

/* ======================================================================
   37 · Quellenangabe  mz-source (seit 0.8.0)
   Text-Element › Class: mz-source – klein, Grau, unter Zahlen/Grafiken.
   ====================================================================== */
.mz-source.mz-source { font-size: 13.5px; line-height: 1.5; color: var(--mz-grau-mittel); }
.uk-section-secondary .mz-source.mz-source { color: var(--mz-blau-hell); }

/* ======================================================================
   38 · Verlinkte Karten in mz-layers (seit 0.8.0)
   Grid › Link-Text z. B. „Mehr dazu“, Panel-Link an: Link unten, rot, mit Pfeil;
   ganze Karte hebt sich beim Überfahren leicht ab.
   ====================================================================== */
.mz-layers .el-item:has(> .el-link), .mz-layers .el-item:has(.el-link) { display: flex; flex-direction: column; }
.mz-layers .el-link { margin-top: auto; padding-top: 16px; }
.mz-layers .el-link, .mz-layers a.el-link.uk-button-text { color: var(--mz-rot); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 15px; }
/* Pfeil kommt aus dem Child-Theme (Maske); Text-Inhalt würde die Grundlinie verschieben (seit 0.13.2 leer) */
.mz-layers .el-link::after { content: ""; }
.mz-layers .el-link::before { display: none; }
.mz-layers a.el-item, .mz-layers .uk-link-toggle .el-item { transition: box-shadow .2s; }
.mz-layers a.el-item:hover, .mz-layers .uk-link-toggle:hover .el-item { box-shadow: 0 8px 24px rgba(38,57,71,.12); }

/* Lange Titel in Karten (seit 0.8.1): Silbentrennung, bei schmalen Karten kleinere Titel */
.mz-layers .el-title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.mz-layers .el-item { container-type: inline-size; }
@container (max-width: 230px) { .mz-layers .el-title.el-title { font-size: 19px; line-height: 1.2; } }

/* Einspaltige Variante (seit 0.9.0): <ul class="mz-list mz-cols2 mz-cols2--one"> – Liste mit Trennlinien in einer Spalte */
ul.mz-cols2.mz-cols2.mz-cols2--one { columns: 1; }

/* ======================================================================
   39 · Balkengrafik  mz-bars (seit 0.9.0)
   HTML-Element (Quelltext), siehe Bauanleitung 11:
   <figure class="mz-bars" aria-label="…">
     <p class="mz-bars__title">Phishing-Anfälligkeit</p>
     <ol>
       <li style="--mz-v:38"><span class="mz-bars__lbl">…</span><span class="mz-bars__bar"><b>38 %</b></span><span class="mz-bars__sub">durchschnittlich</span></li>
       <li class="is-goal" style="--mz-v:19"> … </li>
     </ol>
     <figcaption class="mz-bars__src">Quelle: …</figcaption>
   </figure>
   --mz-v = Wert; --mz-max (Standard 40) = Wert, der die volle Balkenlänge ergibt.
   Erster Balken rot (Ist), .is-goal blau (Ziel). Kachel weiß auf Muted, Lichtgrau auf Weiß.
   ====================================================================== */
.mz-bars.mz-bars { --mz-max: 40; margin: 0; padding: 34px 34px 28px; background: #fff; border-top: 3px solid var(--mz-blau); }
.uk-section-default .mz-bars.mz-bars { background: var(--mz-grau-licht); }
.mz-bars .mz-bars__title { margin: 0 0 22px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mz-blau); }
.mz-bars ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.mz-bars ol > li { margin: 0; padding: 0; }
.mz-bars .mz-bars__lbl { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--mz-text); }
.mz-bars .mz-bars__bar { display: flex; align-items: center; gap: 14px; }
.mz-bars .mz-bars__bar::before { content: ""; display: block; flex: none; height: 34px; min-width: 10px; width: calc(var(--mz-v, 0) / var(--mz-max) * 78%); background: var(--mz-rot); }
.mz-bars .is-goal .mz-bars__bar::before { background: var(--mz-blau); }
.mz-bars .mz-bars__bar b { font-size: 30px; font-weight: 900; line-height: 1; color: var(--mz-text); white-space: nowrap; }
.mz-bars .mz-bars__sub { display: block; margin-top: 4px; font-size: 14.5px; color: var(--mz-grau-dunkel); }
.mz-bars .mz-bars__src { margin: 24px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--mz-grau-dunkel); }
@media (max-width: 959px) {
  .mz-bars.mz-bars { padding: 26px 20px 22px; }
  .mz-bars .mz-bars__lbl { font-size: 15px; }
  .mz-bars .mz-bars__bar b { font-size: 24px; }
}

/* ======================================================================
   40 · Link-Schaltflächen  mz-links (seit 0.9.0; 0.9.1: Selektor li > a, sonst gewinnt die Unterstreichung aus .uk-panel a:not([class]))
   Text-Element › Class: mz-links, Inhalt <ul><li><a href="…">Pentesting</a></li>…</ul>
   Kleine umrandete Schaltflächen nebeneinander; auf dunkel weiß, auf hell blau; Hover rot.
   ====================================================================== */
.mz-links.mz-links ul, ul.mz-links.mz-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.mz-links.mz-links li { margin: 0; padding: 0; }
.mz-links.mz-links li::before { display: none; }
.mz-links.mz-links li > a { display: inline-block; padding: 10px 18px; border: 1px solid var(--mz-blau); color: var(--mz-blau); font-weight: 700; font-size: 16px; line-height: 1.3; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.uk-light .mz-links.mz-links li > a, .uk-section-secondary .mz-links.mz-links li > a { border-color: rgba(255,255,255,.4); color: #fff; }
.mz-links.mz-links li > a:hover, .uk-light .mz-links.mz-links li > a:hover { background: var(--mz-rot); border-color: var(--mz-rot); color: #fff; }
.mz-links.mz-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 959px) { .mz-links.mz-links ul, ul.mz-links.mz-links { gap: 8px; } .mz-links.mz-links li > a { font-size: 15px; padding: 9px 14px; } }

/* Meta in mz-steps (seit 0.9.0): Grid › Meta über dem Titel – rote Versalien */
.mz-steps .el-meta.el-meta { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mz-rot); }

/* ======================================================================
   41 · Große Leiste auf dunkel  mz-chips--large (seit 0.10.0)
   <ul class="mz-chips mz-chips--large"><li>Wöchentlich</li><li>8×5</li><li>24×7</li></ul>
   Große, schwarze Begriffe; in dunklen Sektionen weiß mit hellblauer Oberkante.
   ====================================================================== */
ul.mz-chips.mz-chips.mz-chips--large { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.mz-chips.mz-chips.mz-chips--large > li { padding-top: 20px; font-size: clamp(24px, 15px + 1.2vw, 32px); font-weight: 900; line-height: 1.1; }
.uk-light ul.mz-chips.mz-chips, .uk-section-secondary ul.mz-chips.mz-chips { border-top-color: var(--mz-blau-hell); }
.uk-light .mz-chips.mz-chips > li, .uk-section-secondary .mz-chips.mz-chips > li { color: #fff; border-right-color: rgba(255,255,255,.22); }
@media (max-width: 959px) {
  ul.mz-chips.mz-chips.mz-chips--large { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mz-chips.mz-chips.mz-chips--large > li { font-size: 22px; padding: 16px 12px 0 0; margin-right: 12px; border-right: 1px solid var(--mz-grau-hell); }
  .uk-light .mz-chips.mz-chips.mz-chips--large > li, .uk-section-secondary .mz-chips.mz-chips.mz-chips--large > li { border-right-color: rgba(255,255,255,.22); }
  .mz-chips.mz-chips.mz-chips--large > li:last-child { border-right: 0; margin-right: 0; }
}

/* ======================================================================
   42 · Grafik-Karten  mz-figs (seit 0.10.0)
   Grid-Element › Class: mz-figs, nur Bild + Titel (Titel = Bildunterschrift), Lightbox an.
   Weiße Karte mit roter Oberkante, Unterschrift klein grau.
   ====================================================================== */
.mz-figs .el-item { height: 100%; box-sizing: border-box; padding: 24px 24px 18px; background: #fff; border-top: 3px solid var(--mz-rot); }
.uk-section-default .mz-figs .el-item { background: var(--mz-grau-licht); }
.mz-figs .el-image { display: block; width: 100%; height: auto; }
.mz-figs .el-title.el-title { margin: 14px 0 0; font-size: 15.5px; line-height: 1.4; font-weight: 400; color: var(--mz-grau-dunkel); text-transform: none; letter-spacing: 0; }
@media (max-width: 959px) { .mz-figs .el-item { padding: 16px 14px 12px; } }
.mz-figs a.el-item, .mz-figs .uk-link-toggle { cursor: zoom-in; }

/* SVG-Grafiken in der Lightbox (seit 0.10.1): SVGs haben oft eine kleine Eigengröße (z. B. 471 px) –
   UIkit vergrößert nicht. Gilt für jede Lightbox, aber nur für SVG-Bilder: groß, weiß hinterlegt. */
.uk-lightbox-items > * > img[src$=".svg"], .uk-lightbox-items > * > img[src*=".svg?"] { width: min(92vw, 1400px); height: auto; max-height: 88vh; object-fit: contain; background: #fff; padding: 2vw; box-sizing: border-box; }

/* Abschlusszeile in Karten (seit 0.10.0): <p class="mz-ideal">Ideal für …</p> im Inhalt einer mz-layers-Karte – sitzt unten mit Linie */
.mz-layers .el-item:has(.mz-ideal) { display: flex; flex-direction: column; }
.mz-layers .el-item:has(.mz-ideal) > .el-content, .mz-layers .el-item:has(.mz-ideal) .el-content { display: flex; flex-direction: column; flex: 1; }
.mz-ideal.mz-ideal { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--mz-grau-hell); font-size: 16px; line-height: 1.55; color: var(--mz-grau-dunkel); }

/* ======================================================================
   43 · Verlaufsgrafik  mz-trend (seit 0.11.0)
   HTML-Element (Quelltext), siehe Bauanleitung 13:
   <figure class="mz-trend" aria-label="…">
     <div class="mz-trend__main">
       <p class="mz-trend__title">Offene Schwachstellen</p>
       <ol class="mz-trend__bars">
         <li style="--mz-v:2132"><span class="mz-trend__m">Jan</span><span class="mz-trend__bar"><b>2.132</b></span></li>
         <li style="--mz-v:1812"><span class="mz-trend__m">Feb</span><span class="mz-trend__bar"><b>1.812</b><i>1</i></span></li> …
       </ol>
       <ol class="mz-trend__ev"><li><i>1</i><span><b>Februar</b> …</span></li> …</ol>
     </div>
     <ul class="mz-trend__side"><li>…</li></ul>
     <figcaption>…</figcaption>
   </figure>
   --mz-v = Wert, --mz-max (Standard 2200) = Wert für volle Höhe. Erste Säule rot (Ausgangswert).
   Desktop Säulen, Handy (< 960 px) waagerechte Balken. Seitenleiste optional.
   ====================================================================== */
.mz-trend.mz-trend { --mz-max: 2200; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; padding: 34px 34px 24px; background: #fff; border-top: 3px solid var(--mz-blau); }
.mz-trend.mz-trend:not(:has(.mz-trend__side)) { grid-template-columns: minmax(0, 1fr); }
.uk-section-default .mz-trend.mz-trend { background: var(--mz-grau-licht); }
.mz-trend .mz-trend__title { margin: 0 0 18px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mz-blau); }
.mz-trend ol.mz-trend__bars { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; align-items: end; height: 260px; border-bottom: 1px solid var(--mz-grau-hell); }
.mz-trend .mz-trend__bars > li { position: relative; display: flex; flex-direction: column-reverse; align-items: center; height: 100%; margin: 0; padding: 0; }
.mz-trend .mz-trend__m { position: absolute; bottom: -26px; font-size: 13.5px; color: var(--mz-grau-dunkel); }
.mz-trend .mz-trend__bar { position: relative; display: block; width: 100%; min-height: 4px; height: calc(var(--mz-v, 0) / var(--mz-max) * 100%); background: var(--mz-blau); }
.mz-trend .mz-trend__bars > li:first-child .mz-trend__bar { background: var(--mz-rot); }
.mz-trend .mz-trend__bar b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; font-size: 14px; font-weight: 900; line-height: 1.2; color: var(--mz-text); white-space: nowrap; }
.mz-trend .mz-trend__bar i, .mz-trend .mz-trend__ev i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mz-rot); color: #fff; font-style: normal; font-size: 12.5px; font-weight: 700; line-height: 1; }
.mz-trend .mz-trend__bar i { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 26px; }
.mz-trend ol.mz-trend__ev { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.mz-trend .mz-trend__ev > li { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 0; font-size: 15px; line-height: 1.4; color: var(--mz-grau-dunkel); }
.mz-trend .mz-trend__ev > li::before { display: none; }
.mz-trend .mz-trend__ev i { flex: none; }
.mz-trend .mz-trend__ev b { color: var(--mz-text); }
.mz-trend ul.mz-trend__side { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; align-self: start; }
.mz-trend .mz-trend__side > li { margin: 0; padding: 12px 14px; background: var(--mz-blau); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; }
.mz-trend .mz-trend__side > li::before { display: none; }
.mz-trend figcaption { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--mz-grau-hell); font-size: 14.5px; font-style: italic; color: var(--mz-grau-dunkel); }
@media (max-width: 959px) {
  .mz-trend.mz-trend { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 18px 18px; }
  .mz-trend ol.mz-trend__bars { grid-auto-flow: row; grid-auto-columns: auto; height: auto; gap: 8px; border-bottom: 0; }
  .mz-trend .mz-trend__bars > li { flex-direction: row; height: auto; gap: 10px; }
  .mz-trend .mz-trend__m { position: static; flex: none; width: 34px; }
  .mz-trend .mz-trend__bar { flex: none; height: 22px; width: calc(var(--mz-v, 0) / var(--mz-max) * 72%); min-width: 4px; }
  .mz-trend .mz-trend__bar b { bottom: auto; top: 50%; left: 100%; transform: translateY(-50%); margin: 0 0 0 8px; }
  .mz-trend .mz-trend__bar i { bottom: auto; top: 0; left: 100%; transform: none; margin: 0 0 0 54px; }
  .mz-trend ol.mz-trend__ev { grid-template-columns: 1fr; margin-top: 20px; }
  .mz-trend ul.mz-trend__side { margin-top: 0; }
}

/* Einzelne mz-layers-Karte rot hervorheben (seit 0.11.1): Grid-Eintrag › Erweitert › Klasse mz-card-accent */
.mz-layers .el-item.mz-card-accent, .mz-layers .mz-card-accent > .el-item, .mz-layers .mz-card-accent .el-item { border-top-color: var(--mz-rot); }

/* ======================================================================
   44 · Modellkarten  mz-models (seit 0.12.0)
   Grid-Element › Class: mz-models. Spalten 1 / 2@s / 2@m / 4@l, Lücke Standard, Gleiche Höhe.
   Panel-Stil „Card Default“, Bild oben, Bild-Ausrichtung ohne Innenabstand (Card-Medien).
   Einträge: Bild (4:3), Meta, Titel h3 (märz<span class="mz-pipe">|</span>Mobil5),
   Inhalt (<ul class="mz-list">…</ul><p>…</p>), Link „Modellseite ansehen“, Panel-Link an.
   Weiße Karte mit blauer Oberkante, Link unten rot mit Pfeil.
   ====================================================================== */
.mz-models .uk-card.uk-card {
  height: 100%; box-sizing: border-box; display: flex; flex-direction: column;
  background: #fff; border: 0; border-top: 3px solid var(--mz-blau); border-radius: 0;
  transition: box-shadow .2s;
}
.uk-section-default .mz-models .uk-card.uk-card { background: var(--mz-grau-licht); }
/* Panel-Link setzt uk-display-block (mit !important) – Flex für „Link unten“ trotzdem erzwingen */
.mz-models .uk-card.uk-card.uk-display-block { display: flex !important; }
.mz-models a.uk-card:hover, .mz-models .uk-link-toggle:hover .uk-card { box-shadow: 0 14px 34px rgba(38,57,71,.16); }
.mz-models .uk-card-media-top { background: var(--mz-blau-licht); }
.mz-models .uk-card-media-top img, .mz-models .uk-card-media-top picture img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mz-models .uk-card-body.uk-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
.mz-models .el-meta { margin: 0 0 8px; font-size: 12.5px; line-height: 1.3; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mz-blau); }
.mz-models .el-title.el-title { margin: 0 0 14px; font-size: 24px; line-height: 1.15; font-weight: 900; white-space: nowrap; }
.mz-models .el-content { margin-top: 0; }
.mz-models ul.mz-list.mz-list, .mz-models .mz-list.mz-list ul { margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var(--mz-grau-hell); }
.mz-models .mz-list.mz-list li { font-size: 15px; line-height: 1.45; }
.mz-models .el-content p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--mz-grau-dunkel); }
/* Link unten: der Inhalt wächst (margin-top:auto greift nicht, .uk-margin-top setzt !important) */
.mz-models .uk-card-body > .el-content { flex: 1 0 auto; }
.mz-models .el-link { padding-top: 4px; }
.mz-models .el-link, .mz-models a.el-link.uk-button-text { color: var(--mz-rot); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 15px; }
.mz-models .el-link::after { content: ""; }
.mz-models .el-link::before { display: none; }
@media (max-width: 639px) { .mz-models .uk-card-body.uk-card-body { padding: 22px 20px 24px; } }

/* ======================================================================
   45 · Merkmale mit Icon  mz-feats (seit 0.12.0)
   Grid-Element › Class: mz-feats mz-icons. Spalten 1 / 2@s / 2@m / 4@l, Spaltenabstand Medium,
   Zeilenabstand keiner. Panel-Stil keiner, Icon (Phosphor Light) über dem Titel, Titel h3.
   Offen, ohne Karten: Linie oben, Icon 36 px Blau.
   ====================================================================== */
.mz-feats .el-item { position: relative; height: 100%; box-sizing: border-box; padding: 28px 0 36px; border-top: 1px solid var(--mz-grau-hell); }
.mz-feats .el-image, .mz-feats .el-item > .uk-icon, .mz-feats .el-item svg { width: 36px; height: 36px; color: var(--mz-blau); }
.mz-feats .el-title.el-title { margin: 16px 0 8px; font-size: 20px; line-height: 1.25; font-weight: 700; }
.mz-feats .el-content { margin-top: 0; font-size: 16px; line-height: 1.6; color: var(--mz-grau-dunkel); }
.mz-feats .el-content > :last-child { margin-bottom: 0; }
@media (max-width: 639px) { .mz-feats .el-item { padding: 22px 0 24px; } }

/* ======================================================================
   46 · Label „In Vorbereitung“  mz-soon (seit 0.12.0)
   Im Inhalt eines Grid-Eintrags als erste Zeile: <p class="mz-soon">In Vorbereitung</p>
   In mz-feats und mz-layers sitzt das Label oben rechts in der Karte; sonst steht es inline.
   ====================================================================== */
.mz-soon.mz-soon {
  display: inline-block; margin: 0 0 10px; padding: 4px 9px; background: var(--mz-blau-licht); color: var(--mz-blau);
  font-size: 11.5px; line-height: 1.2; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
/* .el-content ist ein .uk-panel (position: relative) – für die Ecke auf die Karte beziehen */
.mz-feats .el-item:has(.mz-soon) .el-content, .mz-layers .el-item:has(.mz-soon) .el-content { position: static; }
.mz-feats .el-item:has(.mz-soon) .mz-soon.mz-soon { position: absolute; top: 34px; right: 0; margin: 0; }
.mz-layers .el-item:has(.mz-soon) .mz-soon.mz-soon { position: absolute; top: 28px; right: 30px; margin: 0; }
.mz-feats .mz-soon.mz-soon + *, .mz-layers .mz-soon.mz-soon + * { margin-top: 0; }
@media (max-width: 959px) { .mz-layers .el-item:has(.mz-soon) .mz-soon.mz-soon { right: 20px; } }

/* Kontur-Ziffern auf Lichtblau (seit 0.12.0): Linien und Kontur kräftiger */
.mz-lichtblau .mz-count--side .el-item { border-color: var(--mz-blau-hell); }
.mz-lichtblau .mz-count--side .el-item::before { -webkit-text-stroke-color: var(--mz-blau); }

/* ======================================================================
   47 · Bildpaar mit Pfeil  mz-cfg (seit 0.13.0)
   Grid-Element › Class: mz-cfg. Zwei Einträge, Spalten 2 (auch am Handy), Spaltenabstand Large,
   Bild oben (Hochformat), Titel unter dem Bild, Panel-Stil keiner. Roter Pfeil zwischen den Bildern
   (ab 640 px). Für Vorher/Nachher oder Ausbaustufen, z. B. „Schlank → Voll ausgestattet“.
   ====================================================================== */
.mz-cfg { max-width: 760px; margin-left: auto; margin-right: auto; }
.mz-cfg .el-item { text-align: center; }
.mz-cfg .el-image { display: block; width: 100%; height: auto; background: #fff; }
.mz-cfg .el-title.el-title { margin-top: 14px; font-size: 20px; font-weight: 900; line-height: 1.25; text-transform: none; letter-spacing: 0; }
.mz-cfg .uk-grid > :first-child, .mz-cfg.uk-grid > :first-child { position: relative; }
/* Pfeil in der Mitte der Spaltenlücke (UIkit: Lücke = linker Innenabstand der 2. Spalte; Large = 40 px, ab 1200 px 70 px) */
@media (min-width: 640px) {
  .mz-cfg .uk-grid > :first-child::after, .mz-cfg.uk-grid > :first-child::after {
    content: ""; position: absolute; top: 42%; right: -20px; width: 30px; height: 16px; transform: translate(50%, -50%);
    background: var(--mz-rot);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cpath d='M0 8h26M19 2l7 6-7 6' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cpath d='M0 8h26M19 2l7 6-7 6' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}
@media (min-width: 1200px) {
  .mz-cfg .uk-grid > :first-child::after, .mz-cfg.uk-grid > :first-child::after { right: -35px; width: 44px; }
}
@media (max-width: 639px) { .mz-cfg .el-title.el-title { font-size: 17px; } }

/* ======================================================================
   48 · Download-Link  mz-dl (seit 0.13.0)
   Im Text (z. B. als Inhalt einer mz-stats-Kachel): <a class="mz-dl" href="…pdf">Datenblatt herunterladen</a>
   Rot, fett, mit Download-Symbol.
   ====================================================================== */
a.mz-dl.mz-dl { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--mz-rot); text-decoration: none; }
a.mz-dl.mz-dl::before { content: ""; width: 22px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
a.mz-dl.mz-dl:hover { text-decoration: underline; }

/* ======================================================================
   Bewegung reduzieren
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mz-eyebrow, .mz-statement, .mz-compare, .mz-count, .mz-ai, .mz-ai__more, .mz-steps .el-item::before, .mz-svc, .mz-links a, .mz-models .uk-card { transition: none !important; animation: none !important; }
}