/* variants.css — Blattrand-Vermerk fuer den Farbvarianten-Umschalter (WEB-003)
 *
 * Diese Datei gehoert zum Umschalter, nicht zum Seitenlayout. Sie wird nur
 * geladen, damit der Vermerk wie ein Vermerk aussieht — nicht wie ein
 * Feature. Alles hier benutzt Tokens aus dem aktiven Tokensatz.
 *
 * Der Vermerk sitzt am rechten Blattrand, ausserhalb des Leseflusses.
 * Er ist bewusst klein, monospaced und unauffaellig: ein Werkzeug fuer
 * Kaj, das man uebersehen darf.
 */

.variant-note {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--rule) dashed var(--border);
  background: var(--bg);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  justify-content: flex-end;
  font-family: var(--font-display);
  font-size: var(--step--2);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.variant-note__label {
  margin-right: var(--space-1);
}

.variant-note__btn {
  appearance: none;
  border: 0;
  background: none;
  padding: var(--space-1) 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: var(--rule);
  text-underline-offset: var(--space-1);
}

.variant-note__btn:hover {
  color: var(--accent);
}

.variant-note__btn[aria-pressed="true"] {
  color: var(--accent);
  text-decoration-thickness: var(--rule-strong);
}

/* Fokus sichtbar — DESIGN.md §4 */
.variant-note__btn:focus-visible {
  outline: var(--rule-strong) solid var(--accent);
  outline-offset: var(--space-1);
}