/* ══════════════════════════════════════════════════════════════════
   EasyCare — Design-System (neues Design, Migration Etappe D1)
   Spec: docs/spec/spec_dashboard_redesign.md

   #FGC12.7.26 ANALYSE (Fachentscheid Felix: Option B, kein React):
   - Tokens 1:1 aus dem Design-Prototyp übernommen
     (docs/zz-dokumentationen/Claude-Design, shared/tokens.css).
   - Alle Klassen mit ec-Präfix, KEINE Bootstrap-Klassen überschrieben;
     der violette Seitenhintergrund gilt nur innerhalb .ec-page →
     Regressionsrisiko für die übrige App: null. Bestehende ec-Namen
     (style.css: ec-sidebar, ec-main-content, ec-mobile-topbar,
     ec-offcanvas) sind geprüft kollisionsfrei.
   - Inter self-hosted (Fachentscheid 6): Google liefert Inter als
     VARIABLE FONT — eine woff2-Datei (latin) deckt alle Gewichte
     100–900 ab, daher genau eine @font-face-Deklaration mit
     font-weight-Spanne statt vier Einzeldateien. Nicht-lateinische
     Zeichen (z.B. kyrillisch) fallen auf system-ui zurück — akzeptiert.
   - Diese Datei wird in base.html NACH Bootstrap und style.css geladen
     und gewinnt damit gleichrangige Kaskaden-Konflikte.
   ══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Inter-latin-var.260c81a4759b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Brand / Violett ── */
  --ec-purple:        #7D33D0;
  --ec-purple-dark:   #5B1EA8;
  --ec-purple-soft:   #F2EAFB;
  --ec-purple-softer: #FAF5FF;

  /* ── Flächen ── */
  --ec-page-bg:       #FBF7FE;
  --ec-card:          #FFFFFF;
  --ec-border:        #EBE6F2;
  --ec-border-strong: #D7CFE3;

  /* ── Schrift-Töne ── */
  --ec-text:          #15101F;
  --ec-body:          #4A4256;
  --ec-meta:          #867E94;
  --ec-meta-soft:     #A8A2B5;

  /* ── Status ── */
  --ec-red:           #D92D20;
  --ec-red-bg:        #FEEFEC;
  --ec-orange:        #E8732A;
  --ec-orange-bg:     #FFE9D7;
  --ec-amber:         #D9A123;
  --ec-amber-ink:     #8A6310;
  --ec-amber-bg:      #FFF5DA;
  --ec-green:         #2E8C4F;
  --ec-green-bg:      #E1F5E7;
  --ec-blue:          #2563C9;
  --ec-blue-bg:       #E8F0FC;

  --ec-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Seiten-Wrapper (Scope des neuen Designs) ──────────────────── */
.ec-page {
  background: var(--ec-page-bg);
  font-family: var(--ec-font-sans);
  color: var(--ec-text);
  padding: 28px 32px;
  min-height: 100%;
}
.ec-page h1, .ec-page h2, .ec-page h3 { font-family: var(--ec-font-sans); }

.ec-page-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ec-text);
  margin: 0;
}
.ec-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ec-card);
  border: 1px solid var(--ec-border);
  font-size: 14px;
  font-weight: 500;
  color: var(--ec-body);
}
.ec-date-chip i { color: var(--ec-purple); }

/* ── Karte ─────────────────────────────────────────────────────── */
.ec-card {
  background: var(--ec-card);
  border: 1px solid var(--ec-border);
  border-radius: 14px;
}
.ec-card-pad { padding: 22px 24px; }
.ec-card-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ec-text);
  margin: 0;
}
/* Farbiger Akzentbalken vor Panel-Titeln (Prototyp: "Kritische Informationen") */
.ec-card-title-bar {
  display: inline-block;
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--ec-orange);
  margin-right: 10px;
  vertical-align: -3px;
}

/* ── KPI-Kachel ────────────────────────────────────────────────── */
.ec-kpi-card {
  display: block;
  background: var(--ec-card);
  border: 1px solid var(--ec-border);
  border-radius: 14px;
  padding: 18px 20px;
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms, box-shadow 150ms;
}
a.ec-kpi-card:hover {
  color: inherit;
  text-decoration: none;
  border-color: var(--ec-border-strong);
  box-shadow: 0 2px 10px rgba(125, 51, 208, 0.08);
}
.ec-kpi-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ec-meta);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ec-kpi-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ec-text);
  margin-top: 4px;
  line-height: 1.15;
}
.ec-kpi-card.ec-kpi-warn .ec-kpi-value { color: var(--ec-red); }
/* #FGC14.7.26 Unterzeile der Kachel (Vorjahres-Delta, Finanzen-Tab F1) */
.ec-kpi-sub {
  font-size: 12px;
  color: var(--ec-meta);
  margin-top: 2px;
}

/* Sparkline: 8 dekorative Balken. #FGC12.7.26 Bewusst FESTE Muster-Höhen
   per nth-child (Fachentscheid 5: Anzeige mit Muster-Zahlen + Vermerk) —
   es gibt noch keine persistierte Verlaufs-Historie; echte Daten kommen
   mit dem DashboardSnapshot-Modell (Etappe D3). */
.ec-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
  margin-top: 12px;
}
.ec-sparkline span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--ec-purple-soft);
  min-width: 5px;
}
.ec-sparkline span:last-child { background: var(--ec-purple); }
.ec-sparkline span:nth-child(1) { height: 40%; }
.ec-sparkline span:nth-child(2) { height: 50%; }
.ec-sparkline span:nth-child(3) { height: 60%; }
.ec-sparkline span:nth-child(4) { height: 50%; }
.ec-sparkline span:nth-child(5) { height: 70%; }
.ec-sparkline span:nth-child(6) { height: 60%; }
.ec-sparkline span:nth-child(7) { height: 80%; }
.ec-sparkline span:nth-child(8) { height: 95%; }
/* #FGC20.7.26 Mini-Variante für die Qualitäts-Tabelle: gleiche Balken-Mechanik, aber
   flach und rechtsbündig unter der Zahl. Die :nth-child-Muster-Höhen oben greifen hier
   nicht — diese Sparkline wird IMMER mit echten inline-Höhen gerendert. */
.ec-sparkline-mini {
  height: 14px;
  gap: 2px;
  margin-top: 3px;
  width: 56px;
  margin-left: auto;
}
.ec-sparkline-mini span { min-width: 3px; border-radius: 2px 2px 0 0; }
.ec-spark-note {
  font-size: 11px;
  color: var(--ec-meta-soft);
  margin-top: 4px;
}

/* ── Pill-Slider (Segmented Control) ───────────────────────────── */
.ec-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;              /* 8 Optionen: horizontales Wischen statt Umbruch */
  padding-bottom: 4px;           /* Platz für Fokus-Ring/Scrollbar */
  margin-bottom: 24px;
}
.ec-pill {
  white-space: nowrap;
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid var(--ec-border-strong);
  background: var(--ec-card);
  color: var(--ec-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 150ms;
}
.ec-pill:hover { background: var(--ec-purple-soft); color: var(--ec-purple-dark); }
.ec-pill.active {
  background: var(--ec-purple);
  border-color: var(--ec-purple);
  color: #fff;
}
.ec-pill.active:hover { color: #fff; }

/* ── Listenzeile (Pendenzen / Kritische Informationen) ─────────── */
.ec-list-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--ec-border);
  transition: background 120ms;
}
.ec-list-row:last-child { border-bottom: none; }
.ec-list-row:hover { background: var(--ec-purple-softer); }
.ec-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ec-purple-soft);
  color: var(--ec-purple-dark);
  font-size: 15px;
}
.ec-row-icon.ec-tone-danger  { background: var(--ec-red-bg);    color: var(--ec-red); }
.ec-row-icon.ec-tone-orange  { background: var(--ec-orange-bg); color: var(--ec-orange); }
.ec-row-icon.ec-tone-warning { background: var(--ec-amber-bg);  color: var(--ec-amber-ink); }
.ec-row-icon.ec-tone-info    { background: var(--ec-blue-bg);   color: var(--ec-blue); }
.ec-row-icon.ec-tone-success { background: var(--ec-green-bg);  color: var(--ec-green); }
.ec-row-title { font-size: 15px; font-weight: 600; color: var(--ec-text); }
.ec-row-body  { font-size: 13px; color: var(--ec-body); margin-top: 2px; line-height: 1.5; }
.ec-row-meta  { font-size: 12px; color: var(--ec-meta-soft); margin-top: 4px; }
.ec-row-cta {
  font-size: 13px;
  font-weight: 500;
  color: var(--ec-purple);
  text-decoration: none;
  white-space: nowrap;
  align-self: center;
}
.ec-row-cta:hover { color: var(--ec-purple-dark); text-decoration: underline; }

/* ── Badge ─────────────────────────────────────────────────────── */
.ec-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
.ec-badge-danger  { background: var(--ec-red-bg);    color: var(--ec-red); }
.ec-badge-orange  { background: var(--ec-orange-bg); color: var(--ec-orange); }
.ec-badge-success { background: var(--ec-green-bg);  color: var(--ec-green); }
.ec-badge-info    { background: var(--ec-blue-bg);   color: var(--ec-blue); }
/* "Muster"-Vermerk (Fachentscheide 3+5): bewusst auffälliges Amber,
   damit Platzhalter-Daten nicht als echte Zahlen durchgehen. */
.ec-badge-muster  { background: var(--ec-amber-bg);  color: var(--ec-amber-ink); }

/* ── Button / Link-Aktionen ────────────────────────────────────── */
.ec-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--ec-font-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms;
}
.ec-btn-primary { background: var(--ec-purple); color: #fff; }
.ec-btn-primary:hover { background: var(--ec-purple-dark); color: #fff; }
.ec-btn-soft { background: var(--ec-purple-soft); color: var(--ec-purple-dark); }
.ec-btn-soft:hover { background: var(--ec-purple); color: #fff; }
/* #FGC28.7.26 Sekundär-Button (weiss mit Rand) — z.B. «Bearbeiten» in der TopBar. */
.ec-btn-secondary { background: var(--ec-card); color: var(--ec-text); border-color: var(--ec-border-strong); }
.ec-btn-secondary:hover { background: var(--ec-purple-softer); color: var(--ec-text); }

/* ══════════════════════════════════════════════════════════════════
   #FGC28.7.26 Vitalwerte-Redesign + opt-in TopBar (Etappe T1+V1)
   Spec: docs/spec/spec_vitalwerte_redesign.md
   ANALYSE: Der Klienten-Detail-Prototyp nutzt Underline-Tabs (nicht die
   Dashboard-Pills .ec-pills) und eine 64px-TopBar IM Inhaltsbereich (nicht
   über der Sidebar → kein Konflikt). .ec-topbar steht bewusst top-level
   (weisser Hintergrund, keine Violett-Fläche → verletzt die «Violett nur in
   .ec-page»-Regel nicht), weil sie in base.html ausserhalb von .ec-page sitzt.
   ══════════════════════════════════════════════════════════════════ */

/* ── TopBar (Kopfzeile C v2, 64px, sticky im Inhaltsbereich) ────── */
.ec-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 clamp(20px, 3vw, 32px);
  background: var(--ec-card);
  border-bottom: 1px solid var(--ec-border);
  font-family: var(--ec-font-sans);
}
.ec-topbar__left { display: flex; align-items: center; min-width: 0; }
.ec-topbar__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ec-text);
  white-space: nowrap;
  margin: 0;
}
.ec-topbar__sep { width: 1px; height: 26px; background: var(--ec-border); flex-shrink: 0; }
.ec-topbar__search {
  flex: 0 1 280px;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--ec-border-strong);
  background: var(--ec-purple-softer);
  color: var(--ec-meta);
  font-family: inherit;
  font-size: 13px;
}
.ec-topbar__search:disabled { cursor: not-allowed; }
.ec-topbar__spacer { flex: 1; }
.ec-topbar__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ── Klienten-Umschalter (V1 minimal: Zurück + Prev/Next + Name) ── */
.ec-client-switch { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ec-client-switch__back,
.ec-client-switch__nav {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ec-body);
  text-decoration: none;
  flex-shrink: 0;
  transition: background 120ms, color 120ms;
}
.ec-client-switch__nav { background: #FBF9FD; border-color: var(--ec-border); }
.ec-client-switch__back:hover,
.ec-client-switch__nav:hover { background: var(--ec-purple-soft); color: var(--ec-purple-dark); }
.ec-client-switch__nav.is-disabled { opacity: .4; pointer-events: none; }
.ec-client-switch__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ec-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

/* ── Underline-Tabs (Haupt + Sub) ──────────────────────────────── */
.ec-tabs {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ec-border);
  margin-bottom: 20px;
}
.ec-tab {
  padding: 12px 16px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--ec-font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ec-body);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 120ms;
}
.ec-tab:hover { color: var(--ec-text); }
.ec-tab.active { color: var(--ec-purple-dark); font-weight: 600; border-bottom-color: var(--ec-purple); }
.ec-tabs--sub { margin-bottom: 20px; }
.ec-tabs--sub .ec-tab { padding: 8px 12px 10px; font-size: 13px; }

/* ── Abschnitts-Label (STATUS / VERLAUF) ───────────────────────── */
.ec-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ec-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ── Vitalwerte-Filterleiste ───────────────────────────────────── */
.ec-vital-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ec-vital-filter form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--ec-card);
  color: var(--ec-body);
  border: 1px solid var(--ec-border-strong);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.ec-filter-pill.active { background: var(--ec-purple); color: #fff; border-color: var(--ec-purple); }
.ec-filter-pill__count {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ec-purple-soft);
  color: var(--ec-purple-dark);
  font-weight: 600;
}
.ec-filter-pill.active .ec-filter-pill__count { background: rgba(255,255,255,.25); color: #fff; }
.ec-filter-sep { width: 1px; height: 24px; background: var(--ec-border); flex-shrink: 0; margin: 0 4px; }
.ec-filter-date {
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--ec-border-strong);
  background: var(--ec-card);
  font-family: var(--ec-font-sans);
  font-size: 13px;
  color: var(--ec-text);
}
.ec-filter-label { font-size: 13px; color: var(--ec-meta); }

/* ── Status-Kacheln ────────────────────────────────────────────── */
.ec-vital-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
  align-items: stretch;
}
.ec-vital-card {
  box-sizing: border-box;
  background: var(--ec-card);
  border: 1px solid var(--ec-border);
  border-radius: 14px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
}
.ec-vital-card.is-out { border-color: var(--ec-red); }
.ec-vital-card.is-empty { opacity: .92; }
/* #FGC29.7.26 (V3) Klickbare Kachel -> Drilldown-Modal mit grosser Grafik. */
.ec-vital-card--clickable { cursor: pointer; transition: border-color 150ms, box-shadow 150ms; }
.ec-vital-card--clickable:hover { border-color: var(--ec-border-strong); box-shadow: 0 2px 10px rgba(125, 51, 208, 0.08); }
.ec-vital-card--clickable:focus-visible { outline: 2px solid var(--ec-purple); outline-offset: 2px; }
.ec-vital-card--clickable.is-out:hover { border-color: var(--ec-red); }
.ec-vital-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ec-vital-card__label { font-size: 12px; color: var(--ec-text); font-weight: 700; }
.ec-vital-card__freq {
  font-size: 10.5px;
  color: var(--ec-purple-dark);
  background: var(--ec-purple-soft);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  /* #FGC28.7.26 (V2) Frequenz aus der Verordnung kann länger sein ("pro Woche Mo,Do") —
     Kachelbreite bleibt, das Badge darf mehr Platz Richtung Titel nutzen bzw. umbrechen. */
  white-space: normal;
  text-align: right;
}
/* #FGC28.7.26 (V2) Gemessen, aber nicht verordnet (Fachentscheid 3a): neutral-grau, unauffällig. */
.ec-vital-card__badge-unprescribed {
  font-size: 10.5px;
  color: var(--ec-meta);
  background: #F1EEF6;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.ec-vital-card__valrow { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; min-width: 0; }
.ec-vital-card__value {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ec-text);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.ec-vital-card.is-out .ec-vital-card__value { color: var(--ec-red); }
.ec-vital-card__unit { font-size: 14px; color: var(--ec-meta); white-space: nowrap; }
.ec-vital-card__badge-out {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ec-red);
  background: var(--ec-red-bg);
  padding: 2px 8px;
  border-radius: 999px;
}
.ec-vital-card__empty { font-size: 12px; color: var(--ec-meta); height: 96px; display: flex; align-items: center; }
.ec-vital-card__empty .ec-vital-card__value { font-size: 30px; color: var(--ec-border-strong); }
/* v2-Platzhalter-Kachel (Fachentscheid 6) */
.ec-vital-card.is-v2 { justify-content: center; }
.ec-vital-card__v2 { font-size: 13px; color: var(--ec-body); line-height: 1.5; }

/* ── Inline-SVG-Mini-Verlauf ───────────────────────────────────── */
.ec-vital-chart { display: block; width: 100%; overflow: visible; }
.ec-vital-chart .ec-band { fill: var(--ec-green); fill-opacity: .1; }
.ec-vital-chart .ec-band-line { stroke: var(--ec-green); stroke-width: .75; stroke-opacity: .5; stroke-dasharray: 2 2; }
.ec-vital-chart .ec-line { fill: none; stroke: var(--ec-purple); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ec-vital-chart .ec-line-2 { stroke: var(--ec-blue); }
.ec-vital-chart .ec-dot { fill: #fff; stroke: var(--ec-purple); stroke-width: 1.5; }
.ec-vital-chart .ec-dot.is-out { fill: var(--ec-red); stroke: var(--ec-red); }
.ec-vital-chart .ec-axis { font-size: 8.5px; fill: var(--ec-meta-soft); font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ── Verlauf-Matrix ────────────────────────────────────────────── */
.ec-matrix { background: var(--ec-card); border: 1px solid var(--ec-border); border-radius: 14px; overflow: hidden; }
.ec-matrix__scroll { overflow-x: auto; }
.ec-matrix__grid { min-width: max-content; }
.ec-matrix__head,
.ec-matrix__row {
  display: grid;
  grid-template-columns: 110px 72px var(--ec-matrix-cols, repeat(1, minmax(86px, 1fr)));
  column-gap: 12px;
  padding: 10px 22px;
  align-items: center;
}
.ec-matrix__head {
  background: #FBF9FD;
  border-bottom: 1px solid var(--ec-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--ec-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ec-matrix__row {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--ec-body);
  border-bottom: 1px solid var(--ec-border);
}
.ec-matrix__row:last-child { border-bottom: none; }
.ec-matrix__row.is-daytop { border-top: 2px solid var(--ec-border); }
.ec-matrix__date { color: var(--ec-meta); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--ec-border-strong); }
.ec-matrix__time { color: var(--ec-meta); }
.ec-matrix__empty { padding: 18px 22px; font-size: 13px; color: var(--ec-meta); }
.ec-val-out {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ec-red-bg);
  color: var(--ec-red);
  font-weight: 600;
}
/* #FGC29.7.26 Qualifier rechts neben dem Wert in der Verlauf-Matrix (z.B. «2 Nasenbrille»). */
.ec-matrix__qual {
  margin-left: 5px;
  font-size: 11px;
  color: var(--ec-meta-soft);
  white-space: nowrap;
}