/* ===========================================================================
   DSP-11 (13.09.): A11y-/Touch-Meter — Layer-Rules @layer accessibility.
   Wird nicht automatisch in den Head gelinkt (kein Live-Render-Risiko);
   optionales Link-Einbindung je Ziel. WCAG-AA-konforme Farben via Tokens.
   =========================================================================== */
@layer accessibility {
  .a11y-meter {
    --meter-bg: var(--surface-2, #0f172a);
    --meter-fg: var(--accent-safe, #e2e8f0);
    --meter-border: var(--accent, #00f0ff);
    --meter-focus: var(--accent-soft, #93c5fd);

    display: flex; flex-wrap: wrap; gap: .5rem 1rem;
    align-items: center; justify-content: flex-end;
    padding: .55rem .85rem; margin: .5rem 0;
    background: var(--meter-bg); color: var(--meter-fg);
    border: 1px solid var(--meter-border); border-radius: 12px;
    font-size: .78rem; line-height: 1.45;
    min-height: 44px; /* Touch-Ziel Minimum */
  }
  .a11y-meter__label { font-weight: 700; letter-spacing: .2px; }
  .a11y-meter__list { display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; margin: 0; padding: 0; }
  .a11y-meter__list li { white-space: nowrap; }
  .a11y-meter strong { color: color-mix(in srgb, var(--meter-fg) 85%, #fff); }
  .a11y-meter code { font-size: .72em; padding: .05rem .3rem; border-radius: 5px; background: color-mix(in srgb, var(--meter-fg) 12%, transparent); }
  .a11y-meter a:focus-visible,
  .a11y-meter:focus-within { outline: 3px solid var(--meter-focus); outline-offset: 2px; }

  /* reduced-motion-Respekt: Banner selbst animiert nicht; metrische labels ruhig */
  @media (prefers-reduced-motion: reduce) {
    .a11y-meter, .a11y-meter * { animation: none !important; transition: none !important; }
  }
}