/* ------------------------------------------ Seite /medat-zahnmedizin (Präfix mz-) */

.mz-mf { --akzent: #4f7486; --akzent-tief: #355766; }
@media (prefers-color-scheme: dark) {
  .mz-mf { --akzent: #8fb1c2; --akzent-tief: #b7cdd8; }
}

/* Gewichtung: zwei gestapelte Balken */
.mz-gewicht { display: grid; gap: 22px; margin: 30px 0 34px; padding: 26px 28px; border-radius: 24px; background: var(--r-weiss); }
.mz-zeile-kopf { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.r-band .mz-zeile-kopf strong { font: 800 20px/1.2 "Manrope", sans-serif; letter-spacing: -0.015em; color: var(--r-kopf); }
.mz-zeile-kopf span { font: 300 15px/1.2 "Work Sans", sans-serif; color: var(--r-leise); }
.mz-balken { display: flex; gap: 4px; height: 64px; }
.mz-balken a { min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; border-radius: 12px; background: var(--akzent); color: #fff; text-decoration: none; transition: filter 0.15s; }
.mz-balken a:hover { filter: brightness(1.08); }
.r-band .mz-balken b { font: 800 16px/1 "Manrope", sans-serif; color: inherit; }
.mz-balken span { font: 400 13px/1 "Work Sans", sans-serif; }

.mz-kurz { display: none; }
.mz-leer { color: var(--r-leise); font-style: italic; }
.mz-klein { display: block; font: 300 14px/1.4 "Work Sans", sans-serif; color: var(--r-leise); }
.r-band p.mz-fuss { margin-top: -10px; font-size: 14.5px; color: var(--r-leise); }

/* Manuelle Fertigkeiten: zwei Teile mit je einer Grafik */
.mz-mf-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 28px 0; align-items: start; }
.mz-mf-teil { padding: 22px 22px 20px; border-radius: 22px; background: var(--r-hell); border-top: 5px solid #4f7486; }
.r-band .mz-mf-teil h3 { margin: 0 0 8px; }
.r-band .mz-mf-teil p { font-size: 16px; line-height: 1.55; }
.mz-mf-teil figure { margin: 16px 0 0; padding: 12px; border-radius: 16px; background: var(--r-weiss); }
.mz-mf-teil svg { display: block; width: 100%; height: auto; }
.mz-mf-teil figcaption { display: block; margin-top: 10px; font: 300 14px/1.5 "Work Sans", sans-serif; color: var(--r-leise); }
.mz-mf-teil figcaption strong { font-weight: 650; color: var(--r-kopf); }
@media (prefers-color-scheme: dark) { .mz-mf-teil { border-top-color: #8fb1c2; } }

/* Drahtbiegen-Schema (mzd-) */
.mzd-blatt, .mzd-karo { stroke: var(--r-linie); stroke-width: 1; }
.mzd-vorlage { fill: none; stroke: var(--r-leise); stroke-width: 3; stroke-dasharray: 8 7; stroke-linecap: round; stroke-linejoin: round; }
.mzd-draht { fill: none; stroke: #4f7486; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.mzd-ring { fill: none; stroke: var(--r-nein); stroke-width: 2; }
.mzd-label text { font: 600 16px "Work Sans", sans-serif; fill: var(--r-kopf); }
.mzd-l-vorlage, .mzd-l-draht { display: inline-block; vertical-align: middle; width: 26px; height: 0; margin-right: 6px; border-top: 3px dashed var(--r-leise); }
.mzd-l-draht { border-top: 5px solid #4f7486; border-radius: 3px; margin-left: 8px; }
@media (prefers-color-scheme: dark) { .mzd-draht { stroke: #8fb1c2; } .mzd-l-draht { border-top-color: #8fb1c2; } }

/* Formen-spiegeln-Prinzip (mzf-) */
.mzf-raster line { stroke: var(--r-linie); stroke-width: 1; }
.mzf-achse { stroke: #4f7486; stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linecap: round; }
.mzf-form { fill: color-mix(in srgb, var(--r-kopf) 10%, transparent); stroke: var(--r-kopf); stroke-width: 2.5; stroke-linejoin: round; }
.mzf-form-pkt { fill: var(--r-kopf); }
.mzf-loes { fill: var(--r-ok-hauch); fill-opacity: 0.8; stroke: var(--r-ok); stroke-width: 2.5; stroke-linejoin: round; }
.mzf-loes-pkt { fill: var(--r-ok); }
.mzf-mass { stroke: #4f7486; stroke-width: 1.5; }
.mzf-txt { font: 800 13px/1 "Manrope", sans-serif; fill: #4f7486; text-anchor: middle; }
.r-band .mzf-txt.mzf-name { fill: var(--r-kopf); font-size: 14px; }
@media (prefers-color-scheme: dark) { .mzf-achse, .mzf-mass { stroke: #8fb1c2; } .mzf-txt { fill: #8fb1c2; } }

/* Quote */
.mz-quote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 30px 0; }
.mz-quote > div { padding: 24px 26px; border-radius: 22px; background: var(--r-hell); }
.mz-quote > .mz-quote-z { background: var(--akzent); color: #fff; }
.mz-quote-kopf { margin: 0 0 12px; font: 700 12.5px/1.2 "Work Sans", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.mz-quote ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mz-quote li { font: 300 16px/1.45 "Work Sans", sans-serif; }
.r-band .mz-quote li b { display: block; font: 800 20px/1.2 "Manrope", sans-serif; color: var(--r-kopf); }
.r-band .mz-quote-z p { color: inherit; margin: 0; }
.r-band .mz-quote-z .mz-quote-gross { font: 800 30px/1.15 "Manrope", sans-serif; letter-spacing: -0.03em; margin-bottom: 10px; }

/* Zeitleiste Testtag */
.mz-zeit { margin: 30px 0; padding: 30px 28px 24px; border-radius: 24px; background: var(--r-weiss); }
.mz-zeit-spur { position: relative; height: 64px; margin-bottom: 34px; border-radius: 12px; background: var(--r-hell); }
.mz-zeit-strich { position: absolute; top: 0; bottom: -22px; width: 0; border-left: 1px dashed var(--r-linie); }
.mz-zeit-strich em { position: absolute; bottom: 0; left: 0; transform: translateX(-50%); font: 400 12.5px/1 "Work Sans", sans-serif; font-style: normal; color: var(--r-leise); }
.mz-zeit-block { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; border-radius: 12px; background: var(--akzent); color: #fff; overflow: hidden; }
.r-band .mz-zeit-block b { font: 800 15px/1 "Manrope", sans-serif; color: inherit; white-space: nowrap; }
.mz-zeit-pause { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; font: 300 13px/1 "Work Sans", sans-serif; color: var(--r-leise); }
.mz-zeit-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mz-zeit-liste li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.mz-zeit-liste i { width: 12px; height: 12px; border-radius: 3px; background: var(--akzent); }
.r-band .mz-zeit-liste strong { font: 800 17px/1.2 "Manrope", sans-serif; color: var(--r-kopf); }
.mz-zeit-liste span { grid-column: 2; font: 300 14.5px/1.3 "Work Sans", sans-serif; color: var(--r-leise); }

@media (max-width: 640px) {
  .mz-lang { display: none; }
  .mz-kurz { display: inline; }
  .mz-tab th, .mz-tab td { padding-left: 12px; padding-right: 10px; }
  .mz-tab table { font-size: 15px; }
  .mz-gewicht, .mz-zeit { padding: 20px 16px; }
  .mz-balken { height: 58px; }
  .r-band .mz-balken b { font-size: 14px; }
  .mz-balken span { font-size: 12px; }
  .mz-quote, .mz-mf-raster { grid-template-columns: minmax(0, 1fr); }
  .r-band .mz-zeit-block b { font-size: 12px; }
  .mz-zeit-pause { font-size: 0; }
  .mz-zeit-strich em { font-size: 11px; }
  .mz-zeit-liste { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

@media (prefers-color-scheme: dark) {
  .mz-balken a, .mz-zeit-block, .mz-quote > .mz-quote-z { color: #1b1815; }
}
.grau .mz-quote > div:not(.mz-quote-z) { background: var(--r-weiss); }