/* metriken.css — alles auf einen Blick, ohne Erklaerung.
   Bewusst dicht gesetzt: wer hierher kommt, will die Zahlen
   nebeneinander und nicht schoen. */

.mt {
  /* Fester dunkler Grund, also auch eigene Schrift. Siehe die
     Begruendung in techbrowser.css: Theme-Textfarben passen hier nicht. */
  --txt:#f0f4fb; --les:#c9d7ee; --mut:#93a6c6;
  --panel:#111b2f; --tief:#0b1322; --line:#2c4270;
  --gelb:#ffd83d; --cyan:#5ff7ff;
  position:fixed; right:14px; top:64px; z-index:9075;
  width:min(430px, calc(100vw - 28px)); max-height:calc(100vh - 96px); overflow:auto;
  background:color-mix(in srgb, #0b1322 96%, transparent);
  border:1px solid var(--line); border-radius:13px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 18px 56px rgba(0,0,0,.55);
  color:var(--txt); font-family:inherit;
}
.mt[hidden]{display:none}

.mt-kopf{
  position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:10px;
  padding:10px 13px; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, #0b1322 97%, transparent);
}
.mt-kopf b{font-size:13px}
.mt-kopf span{font-size:10px; color:var(--mut); flex:1 1 auto}
.mt-zu{
  cursor:pointer; font-family:inherit; background:none; border:0; color:var(--mut);
  font-size:13px; padding:2px 6px;
}
.mt-zu:hover{color:var(--txt)}

.mt-inhalt{padding:12px 13px 14px}
.mt-block{margin-bottom:14px}
.mt-block h3{
  margin:0 0 6px; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan);
}
.mt-gitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); gap:1px 10px}
.mt-z{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  padding:3px 0; border-bottom:1px solid rgba(255,255,255,.05); min-width:0;
}
.mt-z i{font-style:normal; font-size:10.5px; color:var(--les); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.mt-z b{font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap;
  font-family:ui-monospace,Menlo,monospace}
.mt-z.warn b{color:#ff9aa2}

.mt-satz{margin:6px 0 0; font-size:10.5px; line-height:1.55; color:var(--les);
  border-left:2px solid var(--gelb); padding-left:9px}
.mt-fuss{margin:12px 0 0; font-size:10px; line-height:1.55; color:var(--mut);
  border-top:1px solid var(--line); padding-top:9px}
.mt-leer{font-size:11px; color:var(--mut)}

@media (max-width:640px){
  .mt{right:8px; left:8px; width:auto; top:56px}
  .mt-gitter{grid-template-columns:minmax(0,1fr)}
}