/* mx.css – gemeinsame Stile der Matriz-441-Ansichten (Runde 6, TE-10): Reiter „Originalgrafik | Rechenansicht“ (.ta-tabs/.ta-tab-b,
   js/mx-original.js wireTabs) und die Hervorhebung über der Originalgrafik (.mxo-*, js/mx-original.js viewsHTML/setHighlight).
   Statisch eingebunden auf tabua.html, comecar.html und comparar.html (Meta-Block „css:“), damit die Reiter ohne Nachladen
   ihre Höhe haben. Seitenspezifische Abweichungen stehen in css/tabua-anim.css bzw. css/comecar.css. */

/* ---------- Reiter (WAI-ARIA Tabs) ---------- */
.ta-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(7,10,28,.35);margin:0 0 12px}
.ta-tab-b{min-height:36px;padding:7px 16px;border:0;border-radius:999px;background:none;color:var(--muted);font:600 12.5px/1.2 var(--font);cursor:pointer}
.ta-tab-b:hover{color:var(--text)}
.ta-tab-b[aria-selected=true]{background:var(--gold);color:#1a1405}
.ta-tab-b:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (pointer:coarse){.ta-tab-b{min-height:40px}}   /* Touch-Ziel ≥ 40 px auf allen Seiten (GR-13) */

/* ---------- Bereich mit Originalgrafik | Rechenansicht ---------- */
.mxo{display:grid;min-width:0}
.mxo > .mxo-tabs{justify-self:start;margin:4px 0 12px}
.mxo-p[hidden]{display:none}
.mxo-card h3{margin-bottom:6px}
.mxo-orig{display:grid;gap:6px;min-width:0}
.mxo-orig .m441-list{display:none}              /* die Liste aller Punkte steht im Gesamtbild; hier zählt der Rechenweg */

/* Info-Zeile: Kennbuchstabe als farbige Plakette, danach der Wert */
.mxo-line{margin:0;min-height:1.6em;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.mxo-it{display:inline-flex;align-items:baseline;gap:7px;min-width:0}
.mxo-it > b{display:inline-grid;place-items:center;min-width:22px;padding:1px 6px;border-radius:6px;background:var(--c);color:#111;font:800 11.5px/1.35 var(--font)}
.mxo-it > span{color:var(--text)}
/* GR-03: ein Glossarbegriff in der Plakette erbt die dunkle Schrift und färbt sich beim Überfahren nicht gold (Kontrast) */
.mxo-it > b .gl-term,.mxo-it > b .gl-term:hover,.mxo-it > b .gl-term[aria-expanded="true"]{color:inherit;text-decoration-color:currentColor}

/* Hervorhebung über dem Bild: Raster wie matriz441.js (GRID), Zellgröße = 4,74 % der Bildbreite (Container m441box) */
.mxo-hl{position:absolute;inset:0;pointer-events:none;z-index:5;--mc:4.7406cqw}
.mxo-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mxo-svg .ta-gate{stroke-width:1.8}
.mxo-svg .ta-spiral{stroke:rgba(255,236,190,.42);stroke-width:1.3}
.mxo-svg .ta-trail{stroke-width:3.2}
.mxo-svg .ta-dot{stroke-width:2.5}
.mxo-m{position:absolute;width:0;height:0}
.mxo-m i{position:absolute;left:0;top:0;width:calc(var(--mc) + 9px);height:calc(var(--mc) + 9px);box-sizing:border-box;transform:translate(-50%,-50%);border:3px solid var(--c);border-radius:26%;
  box-shadow:0 0 0 2px rgba(7,10,28,.95),0 0 14px 3px var(--c)}
.mxo-m b{position:absolute;top:0;left:calc(var(--mc) / 2 + 8px);transform:translateY(-50%);padding:.14em .45em;border-radius:.55em;white-space:nowrap;background:var(--c);color:#111;
  font:800 clamp(10px,2.3cqw,15px)/1.15 var(--font);box-shadow:0 0 0 1.5px rgba(7,10,28,.9),0 2px 6px rgba(0,0,0,.5)}
.mxo-m.l b{left:auto;right:calc(var(--mc) / 2 + 8px)}
.mxo-m.cur i{animation:mxo-pulse 1.5s ease-in-out infinite}
.mxo-m.prev i{width:calc(var(--mc) + 3px);height:calc(var(--mc) + 3px);border-width:2.5px;box-shadow:0 0 0 1.5px rgba(7,10,28,.95)}
.mxo-m.prev b{font-size:clamp(8px,1.6cqw,11px);opacity:.92}
.mxo-hl .mxo-m.cur{transition:opacity .4s}
.mxo-hl.pending .mxo-m.cur{opacity:0}
@keyframes mxo-pulse{50%{transform:translate(-50%,-50%) scale(1.28);box-shadow:0 0 0 2px rgba(7,10,28,.95),0 0 24px 8px var(--c)}}
@media (prefers-reduced-motion:reduce){.mxo-m,.mxo-m i{animation:none!important}}
@media print{.ta-tabs{display:none}}