#dauerleistungstest  {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 24px;
      max-width: 1200px;
      margin: 0 auto;
    }
    @media (min-width: 900px) {
      .page { grid-template-columns: 2fr; }
    }
    .title {
      margin: 0 0 12px;
      font-weight: 700;
      letter-spacing: .2px;
    }
    .legend {
      display: flex;         /* statt grid */
      flex-direction: row;   /* waagrecht anordnen */
      flex-wrap: wrap;     /* alles in einer Zeile, kein Umbruch */
      gap: 16px;             /* Abstand zwischen Buttons */
      align-items: center;
    }
        
    .legend .item {
      display: grid;
      grid-template-columns: 16px auto;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      font-size: 16px;
      color: #000;;
    }
    .swatch { width: 16px; height: 16px; border-radius: 3px; display:inline-block; }
    .muted { color: var(--muted); }
    .note { font-size: 12px; color: var(--muted); margin-top: 8px; }
    a { color: var(--accent); text-decoration: none; }

    .card-legend {
      padding-left:70px;
    }