/* The HorseLoop – Einheiten-Umschalter im Artikel (unit-toggle.js, seit 2026-10-27)
   Sitzt als letztes Element in .article-hero__meta und erbt deren Schrift (Mono, 12px,
   Versalien). Beide Segmente haben in jedem Zustand dieselbe Breite und Schriftstärke:
   Umschalten ändert nur Farben, nie das Layout. */

.unit-toggle {
  gap: 0;
  border: 1px solid var(--line, #e6dcc6);
  border-radius: 999px;
  padding: 2px;
  background: var(--bg-soft, #fffdf8);
}

.unit-toggle__btn {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  font-weight: 500;
  color: var(--muted, #6f7d73);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  min-height: 28px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.unit-toggle__btn:hover { color: var(--ink, #1f3a32); }

.unit-toggle__btn[aria-pressed="true"] {
  background: var(--accent, #0A8C5C);
  color: #fff;
}

.unit-toggle__btn:focus-visible {
  outline: 2px solid var(--accent-deep, #087048);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .unit-toggle__btn { transition: none; }
}

/* Die Sperre gegen Aufblitzen (html.units-pending) steht inline im Kopf-Block von
   scripts/units-sync.mjs, nicht hier: diese Datei lädt erst nach dem Artikeltext. */