/* Clinical Mystery: Stilregeln der Engine (assets/mystery-engine.js) und des Monitors (assets/mystery-monitor.js).
   Nur Klassen mit dem Praefix mx-, nur Variablen aus assets/akn.css (Vigilo). Karten weiß auf --surface,
   im Dunkelmodus --surface-card auf Schwarz; Farbe nur mit Bedeutung. */

/* ================= Grundbausteine ================= */
.mx-fall{margin:20px 0 0}
.mx-fall *,.mx-nb *{box-sizing:border-box}
.mx-karte{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:28px 32px 32px; margin:0 0 20px; min-width:0}
.mx-fall [hidden],.mx-nb [hidden],.mx-monitor [hidden]{display:none!important}
.mx-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.mx-kicker{margin:0 0 4px; font-size:15px; line-height:1.4; color:var(--ink-secondary)}
.mx-h{margin:0 0 12px; font:600 28px/1.18 var(--font-display); letter-spacing:-.01em; color:var(--ink)}
.mx-h3{margin:0 0 8px; font:600 21px/1.25 var(--font-display); letter-spacing:-.01em; color:var(--ink)}
.mx-text{font-size:17px; line-height:1.5}
.mx-text p{margin:10px 0}
.mx-text > :first-child{margin-top:0}
.mx-sek{color:var(--ink-secondary)}

/* Knöpfe: grau als Standard, gefüllt nur die eine Hauptaktion */
.mx-knopf{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 20px; border:0; border-radius:999px;
  background:var(--surface-fill); color:var(--ink); font:600 17px/1.2 var(--font-sans); letter-spacing:-.01em; cursor:pointer; text-align:center; transition:background-color .15s}
.mx-knopf:hover{background:var(--surface-fill-2)}
.mx-knopf:focus-visible,.mx-antwort:focus-visible,.mx-befund-k:focus-visible,.mx-kn:focus-visible{outline:3px solid var(--accent-ring); outline-offset:2px}
.mx-knopf--haupt{background:var(--accent); color:var(--on-accent)}
.mx-knopf--haupt:hover{background:var(--accent-hover)}
.mx-knopf--klein{min-height:30px; padding:0 12px; font:500 13px/1 var(--font-sans); letter-spacing:0}
.mx-knopf:disabled{opacity:.35; cursor:default}
.mx-knopf--bestaetigen{box-shadow:inset 0 0 0 2px var(--vital-abp)}
.mx-knoepfe{display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:24px}

/* Etiketten */
.mx-zeit{display:inline-flex; align-items:center; min-height:24px; padding:0 10px; border-radius:999px; background:var(--surface-fill); color:var(--ink-secondary);
  font:600 13px/1 var(--font-rounded); letter-spacing:.01em; font-variant-numeric:tabular-nums}
.mx-etikett{display:inline-flex; align-items:center; min-height:26px; padding:0 12px; border-radius:999px; background:var(--surface-fill); color:var(--ink-secondary); font:600 13px/1 var(--font-sans)}
.mx-etikett--gut{color:var(--vital-ecg)}
.mx-etikett--schlecht{color:var(--vital-abp)}
.mx-bew{display:inline-flex; align-items:center; min-height:22px; padding:0 10px; border-radius:999px; background:var(--surface-fill); color:var(--ink-secondary); font:600 12px/1 var(--font-sans); white-space:nowrap}
.mx-bew--bestens,.mx-bew--gut{color:var(--vital-ecg)}
.mx-bew--riskant{color:var(--vital-temp)}
.mx-bew--fehler{color:var(--vital-abp)}

/* ================= Kopfkarte ================= */
.mx-kopf .mx-h{margin-bottom:20px}
.mx-patient{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 32px; margin:0 0 20px; padding:0}
.mx-patient div{min-width:0}
.mx-patient dt{font-size:13px; line-height:1.3; color:var(--ink-secondary); margin:0}
.mx-patient dd{margin:2px 0 0; font-size:17px; line-height:1.4; overflow-wrap:anywhere}
.mx-patient .mx-breit{grid-column:1 / -1}
.mx-situation{padding-top:20px; border-top:1px solid var(--separator)}
.mx-leitfrage{margin:20px 0 0; font-size:15px; color:var(--ink-secondary)}
.mx-leitfrage b{color:var(--ink); font-weight:600}

/* ================= Verlauf ================= */
.mx-verlauf{position:relative}
.mx-monwrap{position:sticky; top:12px; z-index:5; margin:0 0 20px}
.mx-monwrap--eingebettet{position:static; margin:20px 0}
.mx-liste{min-width:0}
.mx-knoten{transition:opacity .2s}
.mx-knoten--frueher{opacity:.92}
.mx-knoten-kopf{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px}
.mx-uhr{font:600 17px/1 var(--font-rounded); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.mx-uhr small{font:500 13px var(--font-sans); color:var(--ink-secondary); margin-right:6px}
.mx-monplatz:empty{display:none}
.mx-figuren{margin:8px 0 0}

/* Befunde */
.mx-befunde{margin:24px 0 0; padding-top:20px; border-top:1px solid var(--separator)}
.mx-befunde-t{margin:0 0 10px; font-size:13px; font-weight:600; color:var(--ink-secondary)}
.mx-befund-reihe{display:flex; flex-wrap:wrap; gap:8px}
.mx-befund-k{display:inline-flex; align-items:center; min-height:36px; padding:0 16px; border:0; border-radius:999px; background:var(--surface-fill); color:var(--ink);
  font:500 15px/1.2 var(--font-sans); cursor:pointer; text-align:left}
.mx-befund-k:hover{background:var(--surface-fill-2)}
.mx-befund-k:disabled{cursor:default; opacity:.4}
.mx-befund-k:disabled:hover{background:var(--surface-fill)}
.mx-befund-k--an:disabled{opacity:1; background:transparent; box-shadow:inset 0 0 0 1px var(--separator); color:var(--ink-secondary)}
.mx-befund-k .mx-min{color:var(--ink-secondary); margin-left:6px; font-family:var(--font-rounded); white-space:nowrap}
.mx-befund{margin:16px 0 0; padding:16px 20px; border-radius:14px; background:var(--fill-opaque)}
.mx-befund-t{margin:0 0 6px; font-size:13px; font-weight:600; color:var(--ink-secondary)}
.mx-befund .mx-text{font-size:16px}
.mx-befund figure.mx-fig{margin:12px 0 0}

/* Frist */
.mx-frist{margin:20px 0 0; padding:14px 18px; border-radius:14px; background:var(--surface-fill); box-shadow:inset 3px 0 0 var(--vital-abp)}
.mx-frist .mx-text{font-size:16px}

/* Frage und Antworten */
.mx-frage{margin:28px 0 12px; font:600 19px/1.35 var(--font-display); color:var(--ink)}
.mx-antworten{display:flex; flex-direction:column; gap:10px}
.mx-antwort{display:block; width:100%; min-height:52px; padding:14px 26px; border:0; border-radius:999px; background:var(--surface-fill); color:var(--ink);
  font:17px/1.4 var(--font-sans); text-align:left; cursor:pointer; transition:background-color .15s, opacity .2s}
.mx-antwort:hover{background:var(--surface-fill-2)}
.mx-antwort:disabled{cursor:default}
.mx-antwort:disabled:hover{background:var(--surface-fill)}
.mx-antwort--aus{opacity:.38}
.mx-antwort--gewaehlt,.mx-antwort--gewaehlt:disabled:hover{background:var(--surface-card); box-shadow:inset 0 0 0 2px var(--accent); opacity:1}
.mx-antwort--gewaehlt::before{content:"Ihre Wahl"; display:block; font-size:12px; font-weight:600; color:var(--accent-text); margin-bottom:2px}
.mx-sackgasse{margin:20px 0 0; color:var(--ink-secondary); font-size:15px}

/* Ende */
.mx-ende .mx-etikett{margin:0 0 12px}
.mx-punkte{display:flex; flex-wrap:wrap; gap:12px 40px; margin:24px 0 0; padding:20px 0 0; border-top:1px solid var(--separator)}
.mx-punkt dt{font-size:13px; color:var(--ink-secondary); margin:0}
.mx-punkt dd{margin:2px 0 0; font:600 34px/1.1 var(--font-rounded); color:var(--ink); font-variant-numeric:tabular-nums}
.mx-punkt dd small{font:500 15px var(--font-sans); color:var(--ink-secondary); margin-left:4px}

/* ================= Nachbesprechung ================= */
.mx-nb{margin:20px 0 0}
.mx-hinweis{margin:0; padding:20px 24px; border-radius:var(--radius-md); background:var(--surface-fill); color:var(--ink-secondary); font-size:17px}
.mx-nb-h{margin:40px 0 12px; font:600 24px/1.2 var(--font-display); letter-spacing:-.01em; color:var(--ink)}
.mx-nb-h:first-child{margin-top:0}
.mx-nb-lead{margin:0 0 16px; color:var(--ink-secondary); font-size:15px}

/* Entscheidungskarte */
.mx-karte-rahmen{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); overscroll-behavior-x:contain}
.mx-karte-flaeche{position:relative}
.mx-karte-svg{position:absolute; left:0; top:0; overflow:visible}
.mx-k-kante{fill:none; stroke:var(--separator); stroke-width:1.3}
.mx-k-kante--weiche{stroke-dasharray:5 3}
.mx-k-kante--frist{stroke-dasharray:.5 4; stroke-linecap:round; stroke-width:2}
.mx-k-kante--eigen{stroke:var(--accent); stroke-width:3; stroke-dasharray:none}
.mx-k-kante--best{stroke:var(--vital-ecg); stroke-width:2; stroke-dasharray:7 5}
.mx-k-pfeil{fill:var(--separator)}
.mx-k-pfeil--eigen{fill:var(--accent)}
.mx-k-pfeil--best{fill:var(--vital-ecg)}
.mx-kn{position:absolute; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:6px 12px; border:1px solid var(--separator); border-radius:12px;
  background:var(--surface-card); color:var(--ink-secondary); text-align:left; cursor:pointer; font-family:var(--font-sans); overflow:hidden}
.mx-kn:hover{background:var(--fill-opaque)}
.mx-kn-z{font:600 11px/1 var(--font-rounded); color:var(--ink-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mx-kn-t{font:500 13px/1.22 var(--font-sans); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; max-width:100%; overflow-wrap:anywhere; hyphens:auto}
.mx-kn--ende .mx-kn-t{-webkit-line-clamp:1; line-clamp:1; display:block; white-space:nowrap; text-overflow:ellipsis}
.mx-kn--eigen{border:2px solid var(--accent); color:var(--ink)}
.mx-kn--best{border:2px dashed var(--vital-ecg); color:var(--ink)}
.mx-kn--eigen.mx-kn--best{border:2px solid var(--accent); outline:2px dashed var(--vital-ecg); outline-offset:2px; overflow:visible}
.mx-kn--ende{border-radius:999px; padding:6px 16px}
.mx-kn--ende .mx-kn-z{font-family:var(--font-sans); font-size:11px}
.mx-kn--gut .mx-kn-z{color:var(--vital-ecg)}
.mx-kn--schlecht .mx-kn-z{color:var(--vital-abp)}
.mx-kn--weiche{padding:0; border-radius:5px; transform:rotate(45deg); background:var(--surface-card)}
.mx-kn--gewaehlt,.mx-kn--gewaehlt:hover{background:var(--surface-fill)}
.mx-kn--start .mx-kn-z::after{content:"\00A0\00B7\00A0Start"}
.mx-legende{display:flex; flex-wrap:wrap; gap:8px 24px; margin:12px 4px 0; font-size:13px; color:var(--ink-secondary)}
.mx-legende span{display:inline-flex; align-items:center; gap:8px}
.mx-legende svg{width:28px; height:10px; flex:none}
.mx-wisch{display:none; margin:8px 4px 0; font-size:13px; color:var(--ink-secondary)}
.mx-detail{margin:20px 0 0}
.mx-detail:empty{display:none}
.mx-detail-opt{margin:16px 0 0; padding:16px 0 0; border-top:1px solid var(--separator)}
.mx-detail-opt:first-of-type{border-top:0; padding-top:4px}
.mx-detail-kopf{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 4px}
.mx-detail-kopf b{font-weight:600}
.mx-detail-ziel{font-size:13px; color:var(--ink-secondary)}

/* Ihre Entscheidungen */
.mx-schritt .mx-knoten-kopf{margin-bottom:8px}
.mx-wahl{margin:16px 0 0; padding:16px 20px; border-radius:14px; background:var(--fill-opaque)}
.mx-wahl-kopf{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 6px}
.mx-wahl-l{font-size:13px; font-weight:600; color:var(--ink-secondary)}
.mx-wahl-t{margin:0 0 8px; font-weight:600}
.mx-wahl .mx-text{font-size:16px}
.mx-wahl--best{background:transparent; box-shadow:inset 0 0 0 1px var(--separator)}
.mx-vermerk{margin:12px 0 0; font-size:15px; color:var(--ink-secondary)}
.mx-kern{margin:0; padding-left:1.5em}
.mx-kern li{margin:10px 0; font-size:17px; line-height:1.5}
.mx-kern li::marker{font-family:var(--font-rounded); font-weight:600; color:var(--ink-secondary)}

/* ================= Monitor ================= */
.mx-monitor{min-width:0}
.mx-mon{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); overflow:hidden}
.mx-mon-alarm{padding:7px 20px; background:var(--vital-abp); color:var(--on-accent); font:600 13px/1.3 var(--font-sans); letter-spacing:.01em}
.mx-mon-kopf{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px 0 20px}
.mx-mon-titel{font-size:13px; font-weight:600; color:var(--ink-secondary)}
.mx-mon-koerper{display:grid; grid-template-columns:minmax(0,1fr) 188px; gap:20px; padding:8px 20px 18px}
.mx-mon-kurven{min-width:0}
.mx-mon-cv{display:block; width:100%}
.mx-mon-zahlen{display:flex; flex-direction:column; gap:10px; min-width:0; padding-left:20px; border-left:1px solid var(--separator)}
.mx-wert{min-width:0}
.mx-wert-l{display:flex; align-items:baseline; gap:6px; font-size:12px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mx-wert-n{font-weight:600}
.mx-wert-e{color:var(--ink-secondary)}
.mx-wert-z{display:flex; align-items:baseline; gap:6px; margin-top:2px; white-space:nowrap}
.mx-wert-h{font:600 30px/1.05 var(--font-rounded); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.mx-wert-x{font:600 15px/1 var(--font-rounded); color:var(--ink-secondary); font-variant-numeric:tabular-nums}
.mx-wert--gross .mx-wert-h{font-size:42px}
.mx-wert--ecg .mx-wert-n,.mx-wert--ecg .mx-wert-h{color:var(--vital-ecg)}
.mx-wert--abp .mx-wert-n,.mx-wert--abp .mx-wert-h{color:var(--vital-abp)}
.mx-wert--spo2 .mx-wert-n,.mx-wert--spo2 .mx-wert-h{color:var(--vital-spo2)}
.mx-wert--co2 .mx-wert-n,.mx-wert--co2 .mx-wert-h{color:var(--vital-co2)}
.mx-wert--temp .mx-wert-n,.mx-wert--temp .mx-wert-h{color:var(--vital-temp)}
.mx-mon-extra{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; padding-top:10px; border-top:1px solid var(--separator); font:500 13px/1.3 var(--font-rounded); color:var(--ink)}
.mx-mon-extra-n{font-family:var(--font-sans); color:var(--ink-secondary)}
/* Kompakt: haftender Monitor im Fallverlauf, Zahlen im Zweierraster, damit Kurven und Zahlen gleich hoch sind */
.mx-monitor--kompakt .mx-mon-kopf{padding-top:10px}
.mx-monitor--kompakt .mx-mon-koerper{padding-bottom:14px; grid-template-columns:minmax(0,1fr) 196px}
.mx-monitor--kompakt .mx-mon-zahlen{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:8px 10px}
.mx-monitor--kompakt .mx-wert--gross,.mx-monitor--kompakt .mx-wert--abp,.mx-monitor--kompakt .mx-mon-extra{grid-column:1 / -1}
.mx-monitor--kompakt .mx-wert-h{font-size:24px}
.mx-monitor--kompakt .mx-wert--abp .mx-wert-h{font-size:26px}
.mx-monitor--kompakt .mx-wert--gross .mx-wert-h{font-size:34px}
.mx-monitor--kompakt .mx-wert-x{font-size:13px}
.mx-monitor--kompakt .mx-mon-extra{margin-top:0; padding-top:8px; font-size:12px}
.mx-mon--schmal .mx-mon-koerper{grid-template-columns:minmax(0,1fr); gap:16px; padding:8px 16px 16px}
.mx-mon--schmal .mx-mon-kopf{padding:12px 12px 0 16px}
.mx-mon--schmal .mx-mon-zahlen{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 12px; padding:14px 0 0; border-left:0; border-top:1px solid var(--separator)}
.mx-mon--schmal .mx-wert-h,.mx-mon--schmal .mx-wert--gross .mx-wert-h{font-size:26px}
.mx-mon--schmal .mx-wert-x{font-size:13px}
.mx-mon--schmal .mx-mon-extra{grid-column:1 / -1}
.mx-monitor--kompakt .mx-mon--schmal .mx-mon-koerper{grid-template-columns:minmax(0,1fr)}
.mx-monitor--kompakt .mx-mon--schmal .mx-mon-zahlen{grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 12px}
.mx-monitor--kompakt .mx-mon--schmal .mx-wert--gross{grid-column:auto}
.mx-mon--schmal .mx-wert--abp,.mx-monitor--kompakt .mx-mon--schmal .mx-wert--abp{grid-column:span 2}
@media (max-width:380px){ .mx-mon--schmal .mx-mon-zahlen,.mx-monitor--kompakt .mx-mon--schmal .mx-mon-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Vitalkacheln im Stil von Apple Health */
.mx-kacheln{display:grid; grid-template-columns:repeat(auto-fill,minmax(134px,1fr)); gap:12px; margin:12px 0 0}
.mx-kachel{display:flex; flex-direction:column; min-width:0; padding:14px 16px 12px; border-radius:var(--radius-md); background:var(--surface-card); box-shadow:var(--shadow-card)}
.mx-knoten .mx-kachel,.mx-befund .mx-kachel{background:var(--fill-opaque); box-shadow:none}
.mx-kachel-k{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mx-kachel-p{width:8px; height:8px; border-radius:50%; flex:none; display:inline-block}
.mx-kachel-w{margin-top:6px; white-space:nowrap}
.mx-kachel-w b{font:600 28px/1 var(--font-rounded); letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums}
.mx-kachel-w span{font:500 13px/1 var(--font-rounded); color:var(--ink-secondary); margin-left:4px}
.mx-kachel svg{display:block; width:100%; height:30px; margin:8px 0 6px; overflow:visible}
.mx-kachel path{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.mx-kachel-f{font-size:12px; color:var(--ink-secondary)}

/* ================= Abbildungen ================= */
figure.mx-fig{margin:20px 0; background:var(--surface-card); border-radius:14px; overflow:hidden; box-shadow:0 0 0 1px var(--separator); min-width:0}
figure.mx-fig > figcaption{padding:10px 16px 12px; border-top:1px solid var(--separator); background:var(--surface-card); color:var(--ink-secondary); font-size:13px; line-height:1.4}
.mx-fig-in{padding:16px; min-width:0}
.mx-fig-hinweis{margin:8px 0 0; font-size:12px; line-height:1.4; color:var(--ink-secondary)}
.mx-fig-html{overflow-x:auto}
.mx-fig-html table{border-collapse:collapse; width:100%; font-size:15px}
.mx-fig-html th,.mx-fig-html td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--separator); vertical-align:top}
.mx-fig-html th{font-size:13px; color:var(--ink-secondary); font-weight:600}
.mx-fig-svg svg{display:block; max-width:100%; height:auto; margin:0 auto; color:var(--ink)}
.mx-fig-bild{display:block; width:100%; height:auto; border-radius:8px}
figure.mx-fig--bga .mx-fig-in,figure.mx-fig--labor .mx-fig-in{padding:4px 0}

/* Tabellen: BGA, Labor, ROTEM-Werte */
.mx-tab-rahmen{overflow-x:auto; -webkit-overflow-scrolling:touch}
.mx-tab{border-collapse:collapse; width:100%; font-size:15px; line-height:1.35}
.mx-tab th,.mx-tab td{padding:8px 16px; text-align:left; border-bottom:1px solid var(--separator); vertical-align:baseline}
.mx-tab tr:last-child th,.mx-tab tr:last-child td{border-bottom:0}
.mx-tab thead th{font-size:12px; font-weight:600; color:var(--ink-secondary); padding-top:10px; padding-bottom:6px}
.mx-tab tbody th{font-weight:500; white-space:nowrap}
.mx-tab-w{font-family:var(--font-rounded); font-variant-numeric:tabular-nums; white-space:nowrap}
.mx-tab-e,.mx-tab-n{color:var(--ink-secondary); font-size:13px}
.mx-tab-n{white-space:nowrap}
.mx-ab{color:var(--vital-abp); font-weight:700}

/* ROTEM */
.mx-rotem{display:flex; flex-direction:column; gap:16px}
.mx-rotem-z{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,210px); gap:16px; align-items:center; padding-bottom:16px; border-bottom:1px solid var(--separator)}
.mx-rotem-z:last-child{border-bottom:0; padding-bottom:0}
.mx-rotem-name{font:600 13px/1 var(--font-sans); letter-spacing:.04em; color:var(--ink); margin:0 0 6px}
.mx-rotem-svg{display:block; width:100%; height:104px}
.mx-rotem-norm{fill:var(--surface-fill); stroke:none}
.mx-rotem-mitte{stroke:var(--separator); stroke-width:1}
.mx-rotem-flaeche{fill:var(--surface-fill-2); stroke:none}
.mx-rotem-kurve{fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linejoin:round}
.mx-rotem-achse{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-secondary); margin-top:2px}
.mx-rotem-werte .mx-tab th,.mx-rotem-werte .mx-tab td{padding:4px 8px}

/* EKG-Streifen */
.mx-ekg{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:8px}
.mx-ekg-svg{display:block; width:100%; height:auto}
.mx-ekg-fein{stroke:var(--separator); stroke-width:.05; fill:none; opacity:.55}
.mx-ekg-grob{stroke:var(--separator); stroke-width:.14; fill:none}
.mx-ekg-kurve{fill:none; stroke:var(--vital-ecg); stroke-width:.3; stroke-linejoin:round; stroke-linecap:round}
.mx-ekg-text{font:600 3px var(--font-sans); fill:var(--vital-ecg)}

/* Kapnogramm */
.mx-kapno{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px}
.mx-kapno-p{min-width:0}
.mx-kapno-svg{display:block; width:100%; height:auto}
.mx-kapno-raster{stroke:var(--separator); stroke-width:1; stroke-dasharray:2 4}
.mx-kapno-achse{stroke:var(--separator); stroke-width:1}
.mx-kapno-kurve{fill:none; stroke:var(--vital-co2); stroke-width:1.8; stroke-linejoin:round}
.mx-kapno-text{font:500 10px var(--font-sans); fill:var(--ink-secondary)}
.mx-kapno-b{margin:4px 0 0; font-size:13px; color:var(--ink)}

/* Trend */
.mx-trend{display:flex; flex-direction:column; gap:14px}
.mx-trend-z{min-width:0}
.mx-trend-k{display:flex; align-items:baseline; gap:6px; font-size:13px; margin:0 0 4px}
.mx-trend-k .mx-kachel-p{align-self:center}
.mx-trend-n{font-weight:600; color:var(--ink)}
.mx-trend-e{color:var(--ink-secondary)}
.mx-trend-l{margin-left:auto; font:600 17px/1 var(--font-rounded); color:var(--ink); font-variant-numeric:tabular-nums}
.mx-trend-f{position:relative; padding-left:40px}
.mx-trend-f svg{display:block; width:100%; height:56px; overflow:visible}
.mx-trend-r{stroke:var(--separator); stroke-width:1}
.mx-trend-kurve{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.mx-trend-s{position:absolute; left:0; top:0; bottom:0; width:36px; display:flex; flex-direction:column; justify-content:space-between; font:500 11px/1 var(--font-rounded); color:var(--ink-secondary); text-align:right}
.mx-trend-a{position:relative; height:20px; margin-left:40px; border-top:1px solid var(--separator); font:500 11px/1 var(--font-rounded); color:var(--ink-secondary)}
.mx-trend-a span{position:absolute; top:6px; transform:translateX(-50%); white-space:nowrap}
.mx-trend-a span:first-child{transform:none}
.mx-trend-a span:last-child{transform:translateX(-100%)}

/* POCUS-Schemata */
.mx-pocus{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; color:var(--ink)}
.mx-pocus-b{min-width:0; max-width:380px}
.mx-pocus-svg{display:block; width:100%; height:auto}
.mx-pocus-hinweis{margin:4px 0 0; font-size:12px; color:var(--ink-secondary)}
.mx-pocus-sektor{fill:currentColor; fill-opacity:.07; stroke:currentColor; stroke-opacity:.18}
.mx-pocus-feld{fill:currentColor; fill-opacity:.07}
.mx-pocus-wand{fill:none; stroke:currentColor; stroke-opacity:.42; stroke-width:9; stroke-linecap:round; stroke-linejoin:round}
.mx-pocus-duenn{fill:none; stroke:currentColor; stroke-opacity:.34; stroke-width:4; stroke-linecap:round}
.mx-pocus-klappe{fill:none; stroke:currentColor; stroke-opacity:.5; stroke-width:2; stroke-dasharray:6 5}
.mx-pocus-leer{fill:none}
.mx-pocus-gewebe{fill:currentColor; fill-opacity:.12; stroke:none}
.mx-pocus-gewebe2{fill:currentColor; fill-opacity:.42}
.mx-pocus-muskel{fill:currentColor; fill-opacity:.36}
.mx-pocus-kavum{fill:var(--surface-card); fill-opacity:1}
.mx-pocus-pleura{fill:none; stroke:currentColor; stroke-opacity:.8; stroke-width:3.5; stroke-linecap:round}
.mx-pocus-hell{fill:none; stroke:currentColor; stroke-opacity:.8; stroke-width:4}
.mx-pocus-schatten{fill:currentColor; fill-opacity:.2}
.mx-pocus-weich{fill:none; stroke:currentColor; stroke-opacity:.16; stroke-width:6}
.mx-pocus-alinie{fill:none; stroke:currentColor; stroke-opacity:.45; stroke-width:3}
.mx-pocus-blass{stroke-opacity:.15}
.mx-pocus-blinie{fill:none; stroke:currentColor; stroke-opacity:.55; stroke-width:6; stroke-linecap:round}
.mx-pocus-mm{fill:none; stroke:currentColor; stroke-opacity:.3; stroke-width:1.6}
.mx-pocus-z{fill:none; stroke:currentColor; stroke-opacity:.6; stroke-width:1.2; stroke-dasharray:3 3}
.mx-pocus-t{font:500 11px var(--font-sans); fill:currentColor; fill-opacity:.85}

/* ================= Schmale Bildschirme ================= */
@media (max-width:900px){ .mx-monwrap{top:64px} }
@media (max-height:760px){ .mx-monwrap{position:static} }
@media (max-width:599px){
  .mx-karte{padding:20px 20px 24px; border-radius:var(--radius-md)}
  .mx-h{font-size:24px}
  .mx-patient{grid-template-columns:minmax(0,1fr); gap:10px}
  .mx-antwort{padding:12px 22px; font-size:16px}
  .mx-rotem-z{grid-template-columns:minmax(0,1fr)}
  .mx-tab th,.mx-tab td{padding:6px 8px}
  .mx-tab{font-size:14px}
  .mx-tab tbody th{white-space:normal; hyphens:auto}
  .mx-tab-n{white-space:normal; font-size:12px}
  .mx-tab-e{font-size:12px}
  .mx-befund{padding:14px 12px}
  .mx-kachel{padding:12px 14px 10px}
  .mx-kachel-w b{font-size:24px}
  .mx-wisch{display:block}
  .mx-punkt dd{font-size:28px}
}
@media (prefers-reduced-motion: reduce){ .mx-knoten,.mx-antwort,.mx-knopf{transition:none} }
.mx-knoten:focus,.mx-karte:focus{outline:none}

/* =====================================================================================================
   Clinical Mystery v2: Ergänzungen für assets/mystery-sim.js und die neuen Abbildungen in mystery-monitor.js.
   Weiter nur Präfix mx-, nur Variablen aus akn.css. Abstände 4, 8, 12, 20, 32, 80 px.
   ===================================================================================================== */

/* Monitor: geänderte Werte kurz hervorheben */
.mx-wert-h{border-radius:var(--radius-sm); transition:background-color .6s, box-shadow .6s}
.mx-wert--neu .mx-wert-h{background:var(--fill-opaque); box-shadow:0 0 0 4px var(--fill-opaque)}
.mx-mon-leer{margin:0; padding:12px 20px 20px; font-size:15px; color:var(--ink-secondary)}

/* 12-Kanal-EKG */
.mx-ekg12{overflow-x:auto; -webkit-overflow-scrolling:touch}
.mx-ekg12-svg{min-width:720px}
.mx-ekg12 .mx-ekg-fein{stroke-width:.06; opacity:.5}
.mx-ekg12 .mx-ekg-grob{stroke:var(--line-opaque); stroke-width:.2}
.mx-ekg12-kurve{fill:none; stroke:var(--ink); stroke-width:.3; stroke-linejoin:round; stroke-linecap:round}
.mx-ekg12-t{font:600 3.2px var(--font-sans); fill:var(--ink-secondary)}
.mx-ekg12-trenn{stroke:var(--ink); stroke-width:.3}

/* Beatmungskurven */
.mx-beat{max-width:640px}
.mx-beat-svg{display:block; width:100%; height:auto}
.mx-beat-raster{stroke:var(--separator); stroke-width:1; stroke-dasharray:2 4}
.mx-beat-null{stroke:var(--separator); stroke-width:1}
.mx-beat-peep{stroke:var(--ink-secondary); stroke-width:1; stroke-dasharray:6 4}
.mx-beat-kurve{fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linejoin:round}
.mx-beat-name{font:600 12px var(--font-sans); fill:var(--ink)}
.mx-beat-text{font:500 10px var(--font-rounded); fill:var(--ink-secondary)}

/* Bildgebung: dunkler Film für Röntgen, CT und MRT, heller Film für die Angiographie */
.mx-bild{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:20px}
.mx-bild-b{min-width:0; max-width:420px; color:var(--block-ink)}
.mx-bild-svg{display:block; width:100%; height:auto; border-radius:var(--radius-sm)}
.mx-bild-flaeche{fill:var(--block)}
.mx-bild-grund{fill:var(--block)}
.mx-bild-grund-l{stroke:var(--block)}
.mx-bild-dunkel{fill:var(--block)}
.mx-bild-dunkel-l{fill:none; stroke:var(--block); stroke-opacity:.9; stroke-linecap:round; stroke-linejoin:round}
.mx-bild-t--klein{font-size:9px}
.mx-bild-membran{fill:none; stroke:var(--block); stroke-width:2.4; stroke-linecap:round}
.mx-bild-t{font:500 10px var(--font-sans); fill:currentColor; fill-opacity:.7}
.mx-bild-seite{font:600 13px var(--font-sans); fill:currentColor; fill-opacity:.8}
.mx-bild-svg--hell{color:var(--block)}
.mx-bild-flaeche-hell{fill:var(--block-ink); fill-opacity:.8}
.mx-bild-svg--hell .mx-bild-t{fill-opacity:.62}

/* POCUS: Fluss im Duplex und körnige Binnenechos */
.mx-pocus-fluss{fill:currentColor; fill-opacity:.3}
.mx-pocus-punkte{fill:currentColor; fill-opacity:.4}

/* ================= v2: Startkarte ================= */
.mx-start{border-radius:var(--radius-lg); padding:32px}
.mx-start-unter{margin:0 0 20px; font-size:21px; line-height:1.38; color:var(--ink-secondary)}
.mx-start-frage{margin:32px 0 12px; font-size:13px; font-weight:600; color:var(--ink-secondary)}
.mx-lernziele{margin:0; padding:12px 20px; border-radius:var(--radius-md); background:var(--fill-opaque)}
.mx-lernziele summary{cursor:pointer; font-weight:600; min-height:32px; display:flex; align-items:center; list-style:none}
.mx-lernziele summary::-webkit-details-marker{display:none}
.mx-lernziele summary::after{content:""; margin-left:auto; width:8px; height:8px; border-right:2px solid var(--ink-secondary); border-bottom:2px solid var(--ink-secondary); transform:rotate(45deg)}
.mx-lernziele[open] summary::after{transform:rotate(-135deg)}
.mx-lernziele summary:focus-visible,.mx-abschn summary:focus-visible{outline:3px solid var(--accent-ring); outline-offset:2px; border-radius:var(--radius-sm)}
.mx-lernziele ul{margin:8px 0 4px}
.mx-modi,.mx-varianten{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:12px}
.mx-modus,.mx-variante{display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:88px; padding:20px; border:0; border-radius:var(--radius-md);
  background:var(--surface-fill); color:var(--ink); text-align:left; cursor:pointer; font:17px/1.4 var(--font-sans); transition:background-color .15s}
.mx-modus:hover,.mx-variante:hover{background:var(--surface-fill-2)}
.mx-modus b,.mx-variante b{font-weight:600}
.mx-modus span,.mx-variante span{font-size:15px; color:var(--ink-secondary)}
.mx-modus small{margin-top:4px; font-size:13px; font-weight:600; color:var(--ink-secondary)}
.mx-modus[aria-pressed="true"],.mx-variante[aria-pressed="true"]{background:var(--surface-card); box-shadow:inset 0 0 0 2px var(--accent)}
.mx-modus:focus-visible,.mx-variante:focus-visible,.mx-reiter-k:focus-visible,.mx-ddx-platz:focus-visible,.mx-ddx-d:focus-visible,.mx-wahl-option:focus-within{outline:3px solid var(--accent-ring); outline-offset:2px}

/* ================= v2: Kopfzeile ================= */
.mx-sim-kopf{position:sticky; top:0; z-index:8; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px;
  margin:0 0 20px; padding:12px 20px; border-radius:var(--radius-md); background:var(--bar-bg); -webkit-backdrop-filter:var(--material-bar); backdrop-filter:var(--material-bar);
  box-shadow:var(--shadow-card)}
.mx-sim-kopf-z,.mx-sim-kopf-r{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0}
.mx-sim-kopf-r{flex:1 1 280px; justify-content:flex-end}
.mx-sim-uhr{font:600 28px/1 var(--font-rounded); font-variant-numeric:tabular-nums; color:var(--ink)}
.mx-sim-min{font:600 15px/1 var(--font-rounded); font-variant-numeric:tabular-nums; color:var(--ink-secondary)}
.mx-sim-ddxmini{min-width:0; font-size:13px; line-height:1.3; color:var(--ink-secondary); overflow-wrap:anywhere}
.mx-ddx{flex:1 1 100%; max-height:60vh; overflow-y:auto; padding:12px 0 4px; border-top:1px solid var(--separator)}
.mx-ddx-t{margin:0; font-weight:600}
.mx-ddx .mx-vermerk{margin:4px 0 12px}
.mx-ddx-plaetze{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 12px}
.mx-ddx-platz{display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px; border:0; border-radius:var(--radius-sm); background:var(--surface-fill);
  color:var(--ink); font:15px/1.25 var(--font-sans); text-align:left; cursor:pointer; min-width:0; overflow-wrap:anywhere}
.mx-ddx-platz[aria-pressed="true"]{background:var(--surface-card); box-shadow:inset 0 0 0 2px var(--accent)}
.mx-ddx-nr{display:inline-flex; align-items:center; justify-content:center; flex:none; width:22px; height:22px; border-radius:50%; background:var(--surface-fill-2);
  font:600 12px/1 var(--font-rounded); color:var(--ink)}
.mx-ddx-liste{display:flex; flex-wrap:wrap; gap:8px}
.mx-ddx-d{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 12px 0 20px; border:0; border-radius:999px; background:var(--surface-fill); color:var(--ink);
  font:500 15px/1.2 var(--font-sans); cursor:pointer}
.mx-ddx-d:hover,.mx-ddx-platz:hover{background:var(--surface-fill-2)}
.mx-ddx-d--an{background:var(--surface-card); box-shadow:inset 0 0 0 1px var(--separator)}
.mx-ddx-d--leer{color:var(--ink-secondary); padding-right:20px}

/* ================= v2: Spielfläche ================= */
.mx-sim-spiel{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start}
.mx-sim-spiel--breit{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
.mx-sim-rechts{min-width:0}
.mx-sim-spiel--breit .mx-sim-monwrap{position:sticky; top:88px}
.mx-sim-spiel:not(.mx-sim-spiel--breit) .mx-sim-rechts:empty{display:none}
.mx-sim-monwrap{margin:0}
.mx-sim-monwrap.mx-monwrap--eingebettet{margin:12px 0 20px}
.mx-szene .mx-knoten-kopf{justify-content:flex-start}
.mx-sim-ergebnisse:empty{display:none}
.mx-sim-ergebnisse{margin:20px 0 0; padding-top:12px; border-top:1px solid var(--separator)}
.mx-befund{margin:12px 0 0; padding:12px 20px 20px; border-radius:var(--radius-md)}
.mx-befund:focus{outline:none}
.mx-befund-t{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 8px}
.mx-befund--oa{background:transparent; box-shadow:inset 0 0 0 1px var(--separator)}
.mx-sim-entschieden{margin:12px 0 0}
.mx-sim-entschieden .mx-befund-t{margin:0; font-size:15px; color:var(--ink)}
.mx-sim-ereignis{display:flex; flex-direction:column; gap:8px; margin:12px 0 0; padding:12px 20px; border-radius:var(--radius-md); background:var(--surface-fill);
  box-shadow:inset 3px 0 0 var(--ink-secondary)}
.mx-sim-ereignis .mx-zeit{align-self:flex-start}
.mx-sim-ereignis .mx-text{font-size:16px}
.mx-sim-zyklus{display:flex; align-items:center; gap:8px; margin:8px 0 0; font-size:15px; color:var(--ink-secondary)}
.mx-ueberdenken{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin:12px 0 0; padding:8px 12px 8px 20px;
  border-radius:var(--radius-md); box-shadow:inset 0 0 0 1px var(--separator)}
.mx-ueberdenken p{margin:0; font-size:15px; color:var(--ink-secondary)}
.mx-ende-tod{margin:0 0 12px; font:600 21px/1.3 var(--font-display); color:var(--ink)}

/* Aktionsfeld */
.mx-sim-feld{margin:0 0 20px; padding:20px 32px 32px; border-radius:var(--radius-md); background:var(--surface-card); box-shadow:var(--shadow-card)}
.mx-sim-feld[hidden]{display:none}
.mx-sim-aktionen .mx-befunde-t{margin:0 0 12px}
.mx-reiter{display:flex; flex-wrap:wrap; gap:4px; margin:0 0 12px; padding:4px; border-radius:var(--radius-md); background:var(--surface-fill)}
.mx-reiter-k{flex:none; min-height:32px; padding:0 12px; border:0; border-radius:999px; background:transparent; color:var(--ink); font:500 15px/1 var(--font-sans); cursor:pointer; white-space:nowrap}
.mx-reiter-k[aria-selected="true"]{background:var(--seg-on); box-shadow:0 1px 2px rgba(0,0,0,.12); font-weight:600}
.mx-reiter-panel{min-width:0}
.mx-akt{display:inline-block; padding:8px 20px; line-height:1.3; text-align:left}
.mx-akt[aria-expanded="true"]{background:var(--surface-card); box-shadow:inset 0 0 0 2px var(--accent)}
.mx-wahlbox,.mx-fensterbox{margin:12px 0 0; padding:20px; border-radius:var(--radius-md); background:var(--fill-opaque)}
.mx-wahlbox fieldset{margin:0; padding:0; border:0; min-width:0}
.mx-wahlbox legend{padding:0; margin:0 0 8px; font-weight:600}
.mx-wahl-option{display:flex; align-items:flex-start; gap:12px; padding:8px 12px; border-radius:var(--radius-sm); cursor:pointer; font-size:17px; line-height:1.35}
.mx-wahl-option:hover{background:var(--surface-fill)}
.mx-wahl-option input{margin:4px 0 0; flex:none; width:18px; height:18px}
.mx-wahlbox .mx-knoepfe,.mx-fensterbox .mx-knoepfe{margin-top:12px}
.mx-fensterbox .mx-befunde-t{margin:0 0 8px}
.mx-sim-oa{margin-top:0}
.mx-sim-feld > .mx-knoepfe{margin-top:20px}
.mx-sim-entsch{margin:32px 0 0; padding-top:20px; border-top:1px solid var(--separator)}
.mx-sim-entsch .mx-frage{margin:0 0 12px}
.mx-antwort--offen,.mx-antwort--offen:hover{background:var(--surface-card); box-shadow:inset 0 0 0 2px var(--accent)}
.mx-bestaetigen{margin:0 0 4px; padding:12px 20px; border-radius:var(--radius-md); background:var(--fill-opaque)}
.mx-bestaetigen p{margin:0; font-size:15px; color:var(--ink-secondary)}
.mx-bestaetigen .mx-knoepfe{margin-top:12px}
.mx-sim-rea{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin:0 0 20px; padding:12px 12px 12px 20px;
  border-radius:var(--radius-md); background:var(--alarm-tint)}
.mx-sim-rea-t{display:flex; flex-direction:column; gap:4px}
.mx-sim-rea-t b{font-weight:600}
.mx-sim-rea-z{font:600 15px/1 var(--font-rounded); font-variant-numeric:tabular-nums; color:var(--ink-secondary)}

/* Ergebnis und Qualität */
.mx-qualitaet{margin:32px 0 0; padding-top:20px; border-top:1px solid var(--separator)}
.mx-qualitaet-t{margin:0; font:600 17px/1.3 var(--font-display)}
.mx-qualitaet .mx-punkte{margin-top:12px; padding-top:0; border-top:0}
.mx-bew--vertretbar,.mx-bew--neutral{color:var(--ink-secondary)}

/* ================= v2: Nachbesprechung ================= */
.mx-nb2 > .mx-karte{margin-bottom:20px}
.mx-nb-ergebnis-t{margin-top:12px}
.mx-nb-karte{margin:32px 0}
.mx-nb-karte .mx-nb-h{margin-top:0}
.mx-abschn{margin:0 0 12px; border-radius:var(--radius-md); background:var(--surface-card); box-shadow:var(--shadow-card)}
.mx-abschn summary{display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 20px; cursor:pointer; font:600 19px/1.3 var(--font-display); color:var(--ink); list-style:none}
.mx-abschn summary::-webkit-details-marker{display:none}
.mx-abschn summary::after{content:""; margin-left:auto; flex:none; width:8px; height:8px; border-right:2px solid var(--ink-secondary); border-bottom:2px solid var(--ink-secondary); transform:rotate(45deg); transition:transform .15s}
.mx-abschn[open] summary::after{transform:rotate(-135deg)}
.mx-abschn-nr{display:inline-flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; border-radius:50%; background:var(--surface-fill);
  font:600 15px/1 var(--font-rounded); color:var(--ink)}
.mx-abschn-in{padding:0 32px 20px 64px}
.mx-abschn-in > :first-child{margin-top:0}
.mx-nb-diagnose{margin:0; font:600 21px/1.35 var(--font-display)}
.mx-nb-eigen{margin:12px 0 0; padding:12px 20px; border-radius:var(--radius-md); background:var(--fill-opaque); font-size:17px}
.mx-sim-weg{margin:0; padding:0; list-style:none}
.mx-sim-weg li{display:flex; align-items:baseline; gap:8px; margin:4px 0; font-size:15px}
.mx-irrweg{margin-top:12px}
.mx-irrweg .mx-befunde-t{margin:12px 0 4px}
.mx-tab-final{font-weight:600}
.mx-folge{margin:12px 0 0; padding-left:12px; box-shadow:inset 2px 0 0 var(--separator)}
.mx-literatur{margin:0; padding-left:1.5em}
.mx-literatur li{margin:8px 0; font-size:15px; line-height:1.45; overflow-wrap:anywhere}
.mx-k-kante--aktion{stroke-dasharray:9 3 2 3}

/* Verlaufsdiagramm */
.mx-vd{display:flex; flex-direction:column; gap:12px}
.mx-vd-lineal{position:relative; margin-left:40px}
.mx-vd-nr{position:absolute; display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 4px; transform:translateX(-50%);
  border-radius:999px; background:var(--surface-fill); font:600 11px/1 var(--font-rounded); color:var(--ink)}
.mx-vd-nr--e{background:var(--ink); color:var(--surface-card)}
.mx-vd-f{position:relative}
.mx-vd-m{position:absolute; top:0; bottom:0; width:0; border-left:1px dashed var(--ink-secondary); opacity:.6}
.mx-vd-m--e{border-left-style:solid; opacity:.8}
.mx-vd-f svg{width:100%}
.mx-vd-legende{margin:8px 0 0; padding-left:1.8em; font-size:15px}
.mx-vd-legende li{margin:4px 0}
.mx-vd-legende li::marker{font:600 13px var(--font-rounded); color:var(--ink-secondary)}

/* Phasen */
.mx-phasen-balken{display:flex; height:32px; margin:0 0 12px; border-radius:999px; overflow:hidden; gap:2px}
.mx-phasen-seg{display:flex; align-items:center; justify-content:center; min-width:4px; background:var(--surface-fill); font:600 13px/1 var(--font-rounded); color:var(--ink)}
.mx-phasen-seg--b{background:var(--surface-fill-2)}

@media (max-width:599px){
  .mx-start{padding:20px}
  .mx-sim-kopf{padding:8px 12px; border-radius:var(--radius-md)}
  .mx-sim-uhr{font-size:24px}
  .mx-sim-feld{padding:20px}
  .mx-ddx-plaetze{grid-template-columns:minmax(0,1fr)}
  .mx-abschn summary{padding:12px; font-size:17px}
  .mx-abschn-in{padding:0 20px 20px}
  .mx-befund{padding:12px}
  .mx-sim-rea{padding:12px}
}
@media (max-width:900px){ .mx-sim-kopf{top:52px} }
@media (prefers-reduced-motion: reduce){
  .mx-wert-h,.mx-modus,.mx-variante,.mx-abschn summary::after{transition:none}
}
/* Film im Dunkelmodus tiefschwarz, damit Röntgen, CT und MRT denselben Kontrast behalten wie im Hellmodus */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mx-bild-flaeche,:root:not([data-theme="light"]) .mx-bild-grund,:root:not([data-theme="light"]) .mx-bild-dunkel{fill:var(--surface)}
  :root:not([data-theme="light"]) .mx-bild-grund-l,:root:not([data-theme="light"]) .mx-bild-dunkel-l,:root:not([data-theme="light"]) .mx-bild-membran{stroke:var(--surface)}
}
:root[data-theme="dark"] .mx-bild-flaeche,:root[data-theme="dark"] .mx-bild-grund,:root[data-theme="dark"] .mx-bild-dunkel{fill:var(--surface)}
:root[data-theme="dark"] .mx-bild-grund-l,:root[data-theme="dark"] .mx-bild-dunkel-l,:root[data-theme="dark"] .mx-bild-membran{stroke:var(--surface)}

/* P60: Clinical Mystery in der Plattform */
body.mx-breit main{max-width:1240px}
.qbtn.mx-ref{font-size:11px; padding:2px 7px; margin-left:3px; vertical-align:super; line-height:1}
.mx-hg-abb{margin:24px 0}
.mx-hg-abb > p{font-size:15px; color:var(--ink-secondary); margin:8px 0 0}
.mx-status{margin:12px 0 0; font-size:15px; color:var(--ink-secondary)}
ol.mx-lit{padding-left:1.4em}
ol.mx-lit li{margin:0 0 10px; font-size:15px; line-height:1.45}